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

Question

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!

Answer 1

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

Answer 2

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.