How do I load HTML from a string and have AngularJS bindings work

Question

I have an angular project that will be loading external HTML from a string variable into a div that currently has a controller scoped to it.

The HTML that I will be loading from the var will have angular bindings in the html. Once loaded the bindings don't seem to work. I'm wondering how I get angular to recognize the new HTML and parse the bindings so that content renders properly.

Right now the HTML loads but I end up seeing things like {{myvar}} render as text and not render the scoped variables.

Could you post your code please? Check your browser console as well. If something like the controller fails to bind properly, you'll see an error in the console and this sort of behavior in your output. — War10ck
– War10ck, Commented Oct 10, 2013 at 20:32

T W · Accepted Answer · 2013-10-10 20:38:39Z

1

You need to do manually what angular does automatically inside ng-view directive. Something like along those lines should do the trick:

var html = '...';
var linker = $compile(html); // compile html
var element = linker($scope, function () { // remember to pass correct scope here
}); // link compiled html with scope
$('.target-div').append(element);

answered Oct 10, 2013 at 20:38

T W

6,3272 gold badges28 silver badges33 bronze badges

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

Comments

ritchielee · Accepted Answer · 2013-10-10 22:51:18Z

0

Output to your element like this:

<p ng-bind-html="myvar.name"></p>

answered Oct 10, 2013 at 22:51

ritchielee

2681 silver badge9 bronze badges

Collectives™ on Stack Overflow

How do I load HTML from a string and have AngularJS bindings work

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related