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 会假设它可能是一个无限循环并引发错误。