CODEWITHSUNDEEP
javascripthtmlcssangularjs
Lee Brindley
Lee Brindley

Reputation: 6502

AngularJS get 'compiled html'

Say I have the following anglarjs DOM Structure

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

    ... content

</div>

How would I get the 'compiled' version of this on a click event for example? I.e.

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

I've got an angularjs page that uses various ui-bootstrap components and I want to get the raw html of the page, send it to a server so that it (server) can generate a .pdf file from the sent html.

The server will have access to all relevant css files.

Edit:

I have tried innerHTML to no avail.

Upvotes: 1

Views: 556

Answers (3)

enguerranws
enguerranws

Reputation: 8233

Souldreamer's answer is right, as long as you wrap it into Angular's $scope :

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


}

Live demo :

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

Upvotes: 0

Ionut Costica
Ionut Costica

Reputation: 1392

You could try brute-force:

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

For example:

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>

Run the code, fill in the text box and look for the ***s in the alert box. Above them, if you entered red in the input box, you'll see class="... red".

Upvotes: 1

erdysson
erdysson

Reputation: 1490

Angular compiles you views according to controller values for bindings but it does not remove the ng-class like directives from your html, because it still watches and applies the scope changes into your view. for example it compiles ng-class="{'red': true}" into class="red", but ng-class part still remains

Upvotes: 0

Related Questions