ng-repeat：达到 10 次 $digest() 迭代

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() 迭代

ng-repeat: 10 $digest() iterations reached

navigation

navigationbar

angularjs

ng-repeat