javascript - 递归 ng-include 抛出 "10 $digest() iterations reached"

Question

我正在使用递归 ng-repeat 渲染一个树结构，如下所示:

<div class="folder-item"
     ng-repeat="place in places"
    <div class="folder-children"
         ng-repeat="data in place.children"
         ng-include="'tree_item_renderer.html'">
    </div>
</div>

和模板:

<script type="text/ng-template"
            id="tree_item_renderer.html">
        <div>
            <!-- some irrelevant code -->

            <div ng-if="data.children">
                <div class="folder-children"
                     ng-repeat="data in data.children"
                     ng-include="'tree_item_renderer.html'"></div>
            </div>
        </div>
    </script>

这工作得很好，直到有 10 个或更多级别的深度，然后我会抛出 10 $digest() iterations returned 错误。

如何修复它？到目前为止我找不到任何解决方案。

Answer 1

10 个摘要循环的限制是为了防止 10 个继承作用域引起的性能问题(其中一个作用域的任何更改都会触发所有 10 个作用域的摘要循环，这是一项相当昂贵的任务。

如 docs 中所写您可以更改最大摘要周期数，但您应该记住:

Increasing the TTL could have performance implications, so you should not change it without proper justification.

将数字从 10 增加到配置 block 中:

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

在不损失性能的情况下，另一种方法是编写一个指令，在内部实现递归，并在内部管理更改。