javascript - 为什么我的 $digest() 迭代次数达到了？如何跟踪递归脚本的事件？

Question

我正在尝试理解我的递归脚本，它的效率很低。

我尝试创建计数器来告诉我它被调用了多少次以及从哪里调用，这样我就可以更好地理解它的行为。但是，我在控制台中收到错误，它超出了它可以调用的迭代量:

Uncaught Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: function (context) {\n          for(var i = 0, ii = length, part; i<ii; i++) {\n            if (typeof (part = parts[i]) == 'function') {\n  .........

经过广泛阅读后，我有一种强烈的感觉，这与 Angular 每次更新计数器时重新计算所有内容有关，$watch 认为这是一个变化，引发了新的 $消化轮。这是正确的吗？

如果是这样，我如何在递归脚本上实现计数器？

为了提供一个与我想要做的极其相似的示例，我通过 ganarajpr fork 了一个 JSFiddle并添加到其中 here: JSFiddle .

根据 Stackoverflow 的要求，代码复制如下:

HTML:

<div ng-app="myApp">
<div ng-controller="MainCtrl">
<script type="text/ng-template"  id="tree_item_renderer.html">
    {{incrementCounter()}}
    {{data.name}}
    <button class="btn btn-primary" ng-click="add(data)">Add node</button>
    <button class="btn btn-primary" ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

<ul ng-app="Application" ng-controller="TreeController">
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>

</ul>
    <h3> Counter {{counter}}</h3>
</div>

</div>

Javascript:

var app = angular.module("myApp", []);
app.controller("MainCtrl", ['$scope', function ($scope) {
    $scope.counter = 0;
    $scope.incrementCounter = function () {
        console.log("Increment called");
        $scope.counter++;
        document.counter++;
    }
}]);
app.controller("TreeController", ['$scope', function ($scope) {

    $scope.delete = function (data) {
        data.nodes = [];
    };
    $scope.add = function (data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({
            name: newName,
            nodes: []
        });
    };
    $scope.tree = [{
        name: "Node",
        nodes: []
    }];
}]);

Answer 1

在 $digest 循环中，您的 {{incrementCounter()}} 导致 {{counter}} 发生变化，从而导致新的 $digest 循环会导致无限地再次评估 {{incrementCounter()}}。基本上，如果您有一个每个 $digest 周期递增的计数器，则不能让该变量影响任何 $watch 表达式的结果。

您需要替代 {{counter}}，它不依赖于 $watch 表达式的结果(例如，直接写入元素)。