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

Ways to retrieve the data within the tinymce text editor for seamless submission through a form

Tips on connecting the endpoints of two parallel quadratic Bezier curves that both begin with a MoveTo command

Is there a way to link data with the navigation history in UI-Router?

React useEffect appended script not activating

Increase the value of count (an AJAX variable) by 4 upon clicking the button, then send it over to the PHP script

Tips for assigning a default value when an error occurs

Position the typography component to the right side

Angular: A guide to binding to the required/ngRequired attribute

Issue with vertical alignment in form input text area not functioning properly

What causes the appearance of a slight space between a child element positioned absolutely and its parent element with borders? All the margins, padding, and positions have been assigned a value of

Tips for creating a targeted AJAX POST request using jQuery

Understanding Mongodb: the process of populating a schema that is referenced within another schema using an API

Loop through an array of objects, then store each one in MongoDB

Controlling the angular bootstrap modal form with ease

Refresh the page with user input after a button is clicked without reloading the entire page, using Python Flask

Leverage React components for efficient code reuse and export modules for

The size of the array within the object does not align

Encountering issues while trying to install Java using NPM

React: Should we use useCallback when creating a custom Fetch Hook?

Adding a trailing slash to the URL in an Express server causes it to be appended