Question

我无法弄清楚为什么我在这个简单的演示中遇到无限$ digest循环错误。我已经在official documentation中了解了这些循环，但我不明白为什么这个演示会触发错误。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
    var TestApp = angular.module("TestApp", []);

    TestApp.controller("TestCtrl", function ($scope) {
      $scope.Counter = 0;
      $scope.IncrementCounter = function () {
        $scope.Counter+=1;
        return true
      }
    });
</script>
<body ng-app='TestApp'>
  <div ng-controller='TestCtrl'>
    <label>
      Number of times <code>$scope.IncrementCounter()</code>
      has been invoked: {{ Counter }}
    </label>
    <input type="hidden" value="{{ IncrementCounter() === true }}" />
  </div>
</body>

是否无法在$scope函数中递增$scope变量而不会导致整个模型经历摘要周期？

Answer 1

问题是因为您在视图中的绑定中调用了$digest函数。在{{ }}周期中，Angular查看IncrementCounter()括号并执行其中包含的任何函数，您的$scope.Counter函数碰巧更改了范围var TestApp = angular.module("TestApp", []); TestApp.controller("TestCtrl", function ($scope, $timeout) { var init = function() { $scope.counter = 0; incrementCounter(); }; var incrementCounter = function () { $scope.counter++; $timeout(function() { incrementCounter(); }, 1000); }; init(); });上的值，而这在开始关闭另一个$ digest周期，因此该过程不断重复。

您应该在Controller中执行所有这些操作，并且仅使用视图显示示波器上保存的值。例如，您可以使用调用自身的函数来执行此操作，也可以使用$ timeout服务来创建延迟：

<html>
  <head>
    <title>AngularJS Function Invocation Tester</title>
  </head>
    <body ng-app='TestApp'>
      <h2>AngularJS Function Invocation Tester</h2>
      <div ng-controller='TestCtrl'>
        <label>
          Number of times <code>$scope.IncrementCounter()</code>
          has been invoked: <span class="counter">{{ counter }}</span>
        </label>
      </div>
    </body>
</html>

使用上面的代码，您的视图可以是：

{{1}}

为什么会出现无限$ digest循环错误？

1 个答案: