angularjs - 错误 : 10 $digest() iterations reached. 正在中止!使用动态排序谓词

Question

我有以下代码，它重复并显示用户的姓名及其分数:

<div ng-controller="AngularCtrl" ng-app>
  <div ng-repeat="user in users | orderBy:predicate:reverse | limitTo:10">
    <div ng-init="user.score=user.id+1">
        {{user.name}} and {{user.score}}
    </div>
  </div>
</div>

以及相应的 Angular Controller 。

function AngularCtrl($scope) {
    $scope.predicate = 'score';
    $scope.reverse = true;
    $scope.users = [{id: 1, name: 'John'}, {id: 2, name: 'Ken'}, {id: 3, name: 'smith'}, {id: 4, name: 'kevin'}, {id: 5, name: 'bob'}, {id: 6, name: 'Dev'}, {id: 7, name: 'Joe'}, {id: 8, name: 'kevin'}, {id: 9, name: 'John'}, {id: 10, name: 'Ken'}, {id: 11, name: 'John'}, {id: 1, name: 'John'}, {id: 2, name: 'Ken'}, {id: 3, name: 'smith'}, {id: 4, name: 'kevin'}, {id: 5, name: 'bob'}, {id: 6, name: 'Dev'}, {id: 7, name: 'Joe'}, {id: 8, name: 'kevin'}, {id: 9, name: 'John'}, {id: 10, name: 'Ken'}]
}

当我运行上面的代码时，我收到错误:已达到 10 $digest() 迭代。正在中止!控制台中出现错误。

我创建了jsfiddle对于同样的。

排序谓词仅在 ng-repeat 内部初始化，并且对象数量也受到限制。所以我觉得同时使用 sortby 和 limitTo 观察者是错误的原因。

如果 $scope.reverse 为 false(分数升序)，则不会出错。

谁能帮我理解这里出了什么问题吗？非常感谢您的帮助。

Answer 1

请检查此jsFiddle 。 (代码基本上与您发布的相同，但我使用元素而不是窗口来绑定(bind)滚动事件)。

据我所知，您发布的代码没有问题。当您创建属性更改循环时，通常会发生您提到的错误。例如，当您监视某个属性的更改，然后在监听器上更改该属性的值时:

$scope.$watch('users', function(value) {
  $scope.users = [];
});

这将导致错误消息:

Uncaught Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: ...

确保您的代码不会出现这种情况。

更新:

这是你的问题:

<div ng-init="user.score=user.id+1"> 

您不应在渲染期间更改对象/模型，否则，它将强制进行新的渲染(并因此导致循环，这会导致'Error: 10 $digest()已达到迭代次数。正在中止!')。

如果您想更新模型，请在 Controller 或指令上进行，而不是在 View 上进行。 angularjs 文档 recommends not to use ng-init 正是为了避免这些情况:

Use ngInit directive in templates (for toy/example apps only, not recommended for real applications)

这是一个jsFiddle并附有一个工作示例。