Dynamically load template inside ng-repeat

Question

I am trying to dynamically load a template within an ng-repeat:

<ul>
    <li ng-repeat="prop in entity" >
        <div ng-include src="prop.template"></div>
    </li>
</ul>

prop.template equals the URL of the template, e.g. 'partials/form/text.html'. The above code produces the following error:

Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["prop.template; newVal: \"partials/form/text.html\"; oldVal: undefined","prop.template; newVal: \"partials/form/text.html\"; oldVal: undefined" .... (and so on)

How do I get the URL of the template from prop.template and insert the HTML from that file into the DOM within ng-repeat?

Answer 1

http://docs.angularjs.org/api/ng.$rootScope.Scope#$digest

Process all of the watchers of the current scope and its children. Because a watcher's listener can change the model, the $digest() keeps calling the watchers until no more listeners are firing. This means that it is possible to get into an infinite loop. This function will throw 'Maximum iteration limit exceeded.' if the number of iterations exceeds 10.

The problem is not about the code here, it should be working perfectly. See the working example here: http://jsfiddle.net/fmjf8/2/

The problem is either you may have too many elements in your ngRepeating array OR the template your array, or the template you are including is doing too many stuff, raising angular's infinite loop protection. I vote for the second

Answer 2

I know this is a little bit unrelated but I have been searching for a similar issue and my quest brought me here at some point. And since there is not much source on internet about angular I'm writing this here for the other unfortunate folk.

My issue with ng-include:

I had template (html files) views loaded with ng-view from routeparameters, and an ng-include referring one of these templates within another one of them. It produced exactly the same response on the angular side.

From my understanding this happens:

When ng-include tries to embed the template html file to the original one, it tries to do it from scratch, meaning everyhing is reloaded including the original html file, shared files, templates everything;

templateX.html-> ng-include (templateY) -> templateX.html -> templateY .... so actual infinite loop, digest only prevents your browser from crashing due to excessive DOM.

Then I tried to use the full path names instead of any relative path and it solved my problem.

Maybe you can try full path names inside ng-include to resolve your problem.

Hope this helps a little.