CODEWITHSUNDEEP
javascriptangularjs
opyate
opyate

Reputation: 5428

AngularJS to render a template inside a compile inside a loop inside a partial

I have a partial, which has a directive which renders a bunch of things in a loop, using compiled HMTL-as-a-string inside the directive. This HTML-as-a-string itself contains an ng-include, which doesn't render out.

Please see my jsfiddle example

Basically, this doesn't include template2.html:

element.html('<span>The name is ' + scope.content.name + '!</span><div ng-include src="template2.html"></div><br>');

Any pointers would be much appreciated.

Thanks!

Upvotes: 1

Views: 1542

Answers (2)

Wade Tandy
Wade Tandy

Reputation: 4144

Vinod's answer above (replace src="template2.html" with src="\'template2.html\'") is correct, though I would recommend using an actual template instead of manually compiling the template yourself inside the link function. In your example, you aren't actually receiving the benefit of the two way binding. You are just taking the html output of the compile function, and it will never update if the underlying data changes. Here is your example modified to show the bindings (and Vinod's template fix):

http://jsfiddle.net/kf3vZ/5/

Notice how if you change the value of any of the checkboxes, the value in the directives do not change.

Now here is a version using the template argument to the directive:

http://jsfiddle.net/kf3vZ/7/

Now if you change the text fields, the directive values will change also.

Another note, since you are already using the script tags for your templates, you could replace template in your directive with templateUrl and provide the id of the script template.

Upvotes: 3

Vinod Louis
Vinod Louis

Reputation: 4876

WORKING DEMO

just needed to write as

src=" \'template2.html\'"


var linker = function(scope, element, attrs) {
    element.html('<span>The name is ' + scope.content.name + '!</span><div ng-include src=" \'template2.html\'"></div><br>');
    $compile(element.contents())(scope);
};

more info in DOCS

Upvotes: 4

Related Questions