在ng-repeat中动态加载模板

时间:2012-09-11 01:49:00

标签: html angularjs

我正在尝试在ng-repeat中动态加载模板:

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

prop.template等于模板的网址,例如'partials/form/text.html'。上面的代码产生以下错误:

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)

如何从prop.template获取模板的网址,并将该文件中的HTML插入ng-repeat内的DOM?

2 个答案:

答案 0 :(得分:2)

  

http://docs.angularjs.org/api/ng。$ rootScope.Scope#$消化

     

处理当前范围及其子项的所有观察者。因为观察者的监听器可以改变模型,所以$ digest()不断调用监视器,直到不再有监听器被触发为止。这意味着可以进入无限循环。此函数将抛出“超出最大迭代限制”。如果迭代次数超过10次。

问题不在于这里的代码,它应该是完美的。请参阅此处的工作示例:http://jsfiddle.net/fmjf8/2/

问题是你的ngRepeat数组中的元素可能太多,或者你的数组模板,或者你所包含的模板做了太多的东西,提高了角度的无限循环保护。我投票支持第二次

答案 1 :(得分:2)

我知道这有点无关,但我一直在寻找类似的问题,我的任务在某些时候在这里引起了我的兴趣。因为关于角度的互联网上没有太多来源我在这里为其他不幸的人写这篇文章,所以对我来说只有一点点。

我对ng-include的问题:

我有来自routeparameters的ng-view加载的模板(html文件)视图,以及在另一个模板中引用其中一个模板的ng-include。它在角度方面产生完全相同的响应。

根据我的理解,会发生这种情况:

当ng-include尝试将模板html文件嵌入到原始文件时,它会尝试从头开始,这意味着重新加载每个包含原始html文件,共享文件,模板的所有内容;

templateX.html-&GT; ng-include(templateY) - &gt; templateX.html - &gt; templateY ....所以实际的无限循环,digest只会阻止你的浏览器因DOM过多而崩溃。

然后我尝试使用完整路径名而不是任何相对路径,它解决了我的问题。

也许您可以在ng-include中尝试完整路径名来解决问题。

希望这有点帮助。