错误：达到10个$ digest（）迭代。流产！具有动态sortby谓词

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>

以及相应的角度控制器。

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。（代码基本上与您发布的代码相同，但是我使用元素而不是窗口来绑定滚动事件）。

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

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

这将导致错误消息：

未捕获的错误：达到10个$ digest（）迭代。流产！
观察者在最近5次迭代中解雇了：…

确保您的代码没有这种情况。

更新：

这是你的问题：

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

您不应该在渲染过程中更改对象/模型，否则，它将强制执行新的渲染（并因此导致 循环 ，从而导致 “错误：达到10次$
digest（）迭代。异常终止！”
）。

如果要更新模型，请在Controller或Directive（而不是视图）上进行。angularjs文件建议不使用的ng- init完全相同，以避免这些种情况：

在模板中使用ngInit指令（仅适用于玩具/示例应用，不建议用于实际应用）

这是一个带有工作示例的jsFiddle。