Question

假设您有一个非常大的导航，大约有15个嵌套级别，例如：

var app = angular.module("myApp", []);

app.controller("HomeCtrl", ["$scope", function($scope) {
  this.entries = [{
    "title": "test",
    "entries": [{
      "title": "sub-test",
      "entries": [{
        "title": "sub-test",
        "entries": [{
          "title": "sub-test",
          "entries": [{
            "title": "sub-test",
            "entries": [{
              "title": "sub-test",
              "entries": [{
                "title": "sub-test",
                "entries": [{
                  "title": "sub-test",
                  "entries": [{
                    "title": "sub-test",
                    "entries": [{
                      "title": "sub-test",
                      "entries": [{
                        "title": "sub-test",
                        "entries": [{
                          "title": "sub-test",
                          "entries": [{
                            "title": "sub-test"
                          }]
                        }]
                      }]
                    }]
                  }]
                }]
              }]
            }]
          }]
        }]
      }]
    }]
  }];
  return this;
}]);

您正在使用ng-repeat

进行迭代

<script type="text/ng-template" id="entryTree">
  <span>{{ entry.title }}</span>
  <ol ng-if="entry.entries">
    <li ng-repeat="entry in entry.entries" ng-include="'entryTree'"></li>
  </ol>
</script>
<div ng-controller="HomeCtrl as ctrl">
  <ol>
    <li ng-repeat="entry in ctrl.entries" ng-include="'entryTree'"></li>
  </ol>
</div>

Demo

然后会抛出$rootScope:infdig错误：10 $digest() iterations reached. Aborting!。我知道这里有几个类似的问题（例如this one）。但在我的情况下，我没有从控制器返回动态值，也没有使用动态getter，我只是静态地保存控制器内的值。

这里的原因是什么？解决方案怎么样？

Answer 1

由于ng-include，模板的每次迭代都会导致新的摘要循环。当一个摘要循环导致另一个循环，并以这种方式循环10次时，angular假定它可能是一个无限循环并抛出错误。

ng-repeat：达到10 $ digest（）次迭代

1 个答案: