How to compile an Angular template to text

Question

I want to compile an AngularJS template to plain text. I.e. I want to get what you would get by reading the inner HTML of a template rendered in the DOM on the page. But without actually rendering the template to the page.

I have tried using $compile like this

$compile(template)($scope).html()

But it does not seem to work as expected as demonstrated in this jsFiddle. The result both in the jsFiddle and in my project is nothing but a comment inserted by Angular.

What is the proper way to compile an Angular template and getting the result back as an HTML string?

In case anyone are curious why I need to do this: The rendered HTML will be sent to the backend which converts it to a pdf-file that is sent back again.

Have you tried innerhtml? Does $compile return a jQlite object? — iConnor
– iConnor, Commented Oct 23, 2013 at 13:26

Andy Meyers · Accepted Answer · 2013-10-23 13:48:11Z

2

If you want the final output with the scope applied to the view I believe you have to wait until the $digest call is completed.

I updated the fiddle to write the finished HTML to the console. I used a setTimeout() to wait until the $digest call was completed and it displayed the actual result that would be displayed in the HTML.

fiddle

answered Oct 23, 2013 at 13:48

Andy Meyers

1,5811 gold badge15 silver badges22 bronze badges

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

3 Comments

paldepind Over a year ago

I didn't know about $digest. Your solution does indeed work but it is kinda a hack. I can't assume that the compile will always happen in under a second.

Andy Meyers Over a year ago

I was using the setTimeout to demonstrate that if you hold onto the element until after the $digest is completed that the element will be rendered regardless of if it is in the DOM or not. You can call $scope.$apply(); directly and you can get the html that way. You will see an error in the log as well, but it isn't fatal. I updated the fiddle to do this.

Buu Over a year ago

+1. Andy's solution is correct given this use case. But shouldn't trigger digest loop directly, should just use setTimeout(..., 0) to avoid 2 digest loops (one in code & one by AngularJS after bootstrap).

Ben Lesh · Accepted Answer · 2013-10-23 13:32:12Z

0

Something like this ought to do. The isolated scope is optional I suppose, but any model you have will need to be a part of a Scope:

var template = '<div ng-repeat="item in items">{{item}}</div>',
    element = angular.element(template ),
    scope = $rootScope.$new(true); //isolated scope

scope.items = ['foo', 'bar', 'frob'];

// apply bindings!
$compile(template)(scope);

var html = template[0].outerHTML;

answered Oct 23, 2013 at 13:32

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

Collectives™ on Stack Overflow

How to compile an Angular template to text

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related