AngularJS fetches the 'compiled HTML'

Question

AngularJS fetches the 'compiled HTML'

If I have this angularjs DOM structure

<div ng-init="isRed = true" 
    ng-class="{'red': isRed == true, 'black': isRed == false}">

    ... content

</div>

How can I obtain the 'compiled' version of this on a click event, for instance?

<div class="red">
     ... content
</div>

I'm working on an angularjs page that utilizes various ui-bootstrap components and my goal is to extract the raw HTML of the page, then send it to a server where it will be used to generate a .pdf file.

The server will have access to all necessary CSS files.

Edit:

I attempted to use innerHTML without success.

javascript html css angularjs

Answer 1

Answer №1

If you're feeling adventurous, you can attempt a brute-force method:

document.getElementsByTagName('html')[0].innerHTML

Here is an example of how you could approach it:

function showHTML() {
  window.alert(document.getElementsByTagName('html')[0].innerHTML);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <input type="text" ng-model="tester" ng-class="{'red': tester==='red'}">
  <p>The inputted value is ***{{tester}}***</p>
</div>
<button onclick="showHTML()">Show HTML</button>

Execute the code, enter text into the input field, and observe the ***s in the displayed alert. If you entered "red" in the input field, you'll notice the presence of class="... red".

Answer 2

If you're feeling adventurous, you can attempt a brute-force method:

document.getElementsByTagName('html')[0].innerHTML

Here is an example of how you could approach it:

function showHTML() {
  window.alert(document.getElementsByTagName('html')[0].innerHTML);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <input type="text" ng-model="tester" ng-class="{'red': tester==='red'}">
  <p>The inputted value is ***{{tester}}***</p>
</div>
<button onclick="showHTML()">Show HTML</button>

Execute the code, enter text into the input field, and observe the ***s in the displayed alert. If you entered "red" in the input field, you'll notice the presence of class="... red".

Answer 3

Answer №2

When working with Angular, the views are compiled based on controller values for bindings. However, unlike some directives, ng-class is not removed from the HTML. This is because Angular continues to monitor and update changes in the scope, ensuring that these updates are reflected in the view. For instance, ng-class="{'red': true}" is compiled into class="red", but the ng-class portion persists within the code.

Answer 4

When working with Angular, the views are compiled based on controller values for bindings. However, unlike some directives, ng-class is not removed from the HTML. This is because Angular continues to monitor and update changes in the scope, ensuring that these updates are reflected in the view. For instance, ng-class="{'red': true}" is compiled into class="red", but the ng-class portion persists within the code.

Answer 5

Answer №3

According to the advice from Souldreamer, it is important to encapsulate the code within Angular's $scope:

function MyCtrl($scope) { 
 $scope.name = 'Superhero';
    $scope.click =function(){
     alert(document.getElementById('my-el').innerHTML); // class="red", and template rendered
    };


}

To see a live demonstration, visit :

http://jsfiddle.net/HB7LU/21029/

Answer 6

According to the advice from Souldreamer, it is important to encapsulate the code within Angular's $scope:

function MyCtrl($scope) { 
 $scope.name = 'Superhero';
    $scope.click =function(){
     alert(document.getElementById('my-el').innerHTML); // class="red", and template rendered
    };


}

To see a live demonstration, visit :

http://jsfiddle.net/HB7LU/21029/

AngularJS fetches the 'compiled HTML'

Answer №1

Answer №2

Answer №3

Similar questions

problem with accessing a website input area

Provide users with the option to select a specific destination for saving their file

What sets apart "React.useState setter" from "this.setState" when updating state?

What is the reason for labels appearing inside select boxes?

Implementing conditional statements using jQuery for multiple selections

How to Retrieve Upload Progress via HTTP Request in PHP

Update the JavaScript and CSS files following an AJAX request with $.get

What is the best way to use checkboxes to highlight table rows in Jquery Mobile?

Is there a way to make those three elements line up in a row side by side?

Guide on transferring req.flash notices from Node to Angular.js

Troubleshooting vague errors with uploading large files in Golang's net/http protocol

What is the best method for determining the cookie expiration time in AngularJS 1.3?

Drag and Drop in Angular with Dragula - Trigger Confirmation on Drop Event

Exploring the Power of Two jQuery Ajax Functions in Your Script

increasing the top margin on an HTML document

Using Laravel and Bootstrap v4, you can easily implement a feature that redirects to a specific tab after

The horizontal navigation bar will not extend the entire length of the page

How Python Flask sends a string as &#34 to an HTML page

Invoke a router inside Node.js once a route has been triggered

Bidirectional data binding in angular 12 reactive forms