AngularJS get 'compiled html'

Question

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.

I think this is unrelated to your question, but is the ">" at the end of the first line part of your actual code or just a typo in this question? — bstockwell
– bstockwell, Commented Dec 11, 2015 at 13:41
$sanitize service might be what you're looking for:docs.angularjs.org/api/ngSanitize/service/$sanitize — Tomasz Kowalczyk
– Tomasz Kowalczyk, Commented Dec 11, 2015 at 13:46
@dr I have tried the timeout method, I believe our scenarios are different — Lee Brindley
– Lee Brindley, Commented Dec 11, 2015 at 13:56

Ionut Costica · Accepted Answer · 2015-12-11 14:12:31Z

1

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".

edited Dec 11, 2015 at 14:12

answered Dec 11, 2015 at 13:54

Ionut Costica

1,3921 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

enguerranws Over a year ago

I was trying to perform a callback, but depending on its utilisation, this could do the job perfectly.

Lee Brindley Over a year ago

I don't think this would give the desired output, i.e. having 'class="red"' output where the condition on ng-class is true for it to have the 'red' class?

Ionut Costica Over a year ago

It doesn't change ng-class, but it gives the class (class="red" is included among the actual classes)

enguerranws Over a year ago

On my Chrome, the class="red" is not rendered actually.

Ionut Costica Over a year ago

@enguerranws not rendered visually or in the alert box? (it can't be rendered visually, didn't add any CSS :-D). Tested it in Chrome actually, but it should work everywhere that has getElementsByTagName as the changes angular makes to the DOM have to appear in the DOM, thus also in innerHTML

|

erdysson · Accepted Answer · 2015-12-11 14:00:26Z

0

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

answered Dec 11, 2015 at 14:00

erdysson

1,49013 silver badges18 bronze badges

2 Comments

Lee Brindley Over a year ago

Yes that doesn't matter to me, I've given my use case. I want the html output to contain 'class="red"', whether or not it contains the ng-class directive doesn't matter

erdysson Over a year ago

try getElementBySelector("whatever") and cloneNode. you should be able to get the compiled version in the dom

enguerranws · Accepted Answer · 2015-12-11 14:21:51Z

0

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/

answered Dec 11, 2015 at 14:21

enguerranws

8,2338 gold badges53 silver badges101 bronze badges

Collectives™ on Stack Overflow

AngularJS get 'compiled html'

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest