递归 Ng-include 导致错误：$rootScope:infdig Infinite $digest Loop答案

【问题标题】：Recursive Ng-include causing Error: $rootScope:infdig Infinite $digest Loop递归 Ng-include 导致错误：$rootScope:infdig Infinite $digest Loop
【发布时间】：2017-04-13 09:57:08
【问题描述】：

我有一个递归的 Ng-include 导致错误：$rootScope:infdig Infinite $digest Loop

在我的 ctrl 中：

function getTemplate(elementType) {
        console.log(elementType + '_formElement.html');
        return elementType + '_formElement.html';
    };

在我看来：

<div ng-repeat="element in elementList track by $index" ng-init="templateID=vm.getTemplate(element.elementType)">
    <ng-include src="templateID"></ng-include>
</div>

结果： 达到 10 次 $digest() 迭代。中止！

在最后 5 次迭代中触发的观察者：[[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);返回 b(f,c,e)}","newVal":3},{"msg":"fn: 函数 (a){return d(a)}","newVal":""},{"msg":"templateID","newVal":"ROW_formElement.html"}],[{"msg":"fn: 函数 (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);返回 b(f,c,e)}","newVal":3},{"msg":"fn: 函数 (a){return d(a)}","newVal":""},{"msg":"templateID","newVal":"ROW_formElement.html"}],[{"msg":"fn: 函数 (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);返回 b(f,c,e)}","newVal":3},{"msg":"fn: 函数 (a){return d(a)}","newVal":""},{"msg":"templateID","newVal":"ROW_formElement.html"}],[{"msg":"fn: 函数 (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);返回 b(f,c,e)}","newVal":3},{"msg":"fn: 函数 (a){return d(a)}","newVal":""},{"msg":"templateID","newVal":"FIELD_formElement.html"}],[{"msg":"templateID","newVal": "TEXT_field.html"},{"msg":"fn: 函数 (a){return d(a)}","newVal":""}]]

Console.log：

  ROW_formElement.html
7 ROW_formElement.html
  FIELD_formElement.html

我知道我可以像下面这样增加 TTL，但是还有其他解决方案吗？

angular.module('myApp',[]) .config(function($rootScopeProvider) { $rootScopeProvider.digestTtl(number); //some number bigger then 10 })

【问题讨论】：

你能以某种方式提供一个工作代码示例吗？摘要循环似乎通过连续的值变化重新重新运行。
getTemplate() 函数有什么作用？
这是我发布的功能，抱歉我改了名字。有时间我会尝试创建一个 plnkr。

标签： angularjs angularjs-ng-include

【解决方案1】：

经过大量搜索，我认为我的代码没有错误。

正如here 的回答和plunkr 所示，这就是角度的工作原理。
除了设置比 10 更高的摘要 TTL 数之外，似乎没有其他解决方案。

angular.module('myApp',[]) .config(function($rootScopeProvider) { $rootScopeProvider.digestTtl(number); //some number bigger then 10 })

【讨论】：

【解决方案2】：

我遇到了同样的问题，我按照此链接上的建议进行操作，并且成功了！：

Building Nested Recursive Directives in Angular

【讨论】：