在 ng-repeat 中动态加载模板答案

【问题标题】：Dynamically load template inside ng-repeat在 ng-repeat 中动态加载模板
【发布时间】：2012-09-03 21:49:36
【问题描述】：

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

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

prop.template 等于模板的 URL，例如'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 获取模板的 URL 并将该文件中的 HTML 插入到 ng-repeat 内的 DOM 中？

【问题讨论】：

标签： html angularjs

【解决方案1】：

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

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

问题不在于这里的代码，它应该可以完美运行。在此处查看工作示例：http://jsfiddle.net/fmjf8/2/

问题是您的 ngRepeating 数组或您的数组的模板中可能有太多元素，或者您包含的模板做了太多的事情，从而提高了 Angular 的无限循环保护。我投票给第二个

【讨论】：

【解决方案2】：

我知道这有点不相关，但我一直在寻找类似的问题，我的任务在某个时候把我带到了这里。由于互联网上没有太多关于 Angular 的资料，所以我在这里为其他不幸的人写这篇文章。

我对 ng-include 的问题：

我从路由参数加载了 ng-view 的模板（html 文件）视图，并且 ng-include 在其中一个模板中引用了其中一个模板。它在角度侧产生完全相同的响应。

据我了解，会发生这种情况：

当 ng-include 尝试将模板 html 文件嵌入到原始文件中时，它会尝试从头开始，这意味着所有内容都会重新加载，包括原始 html 文件、共享文件、模板所有内容；

templateX.html-> ng-include (templateY) -> templateX.html -> templateY .... 所以实际的无限循环，digest 只会防止您的浏览器由于过多的 DOM 而崩溃。

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

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

希望这会有所帮助。

【讨论】：