错误:达到10个$ digest()迭代 流产!具有动态sortby谓词

科技网编2023-04-07 08:251640

请检查此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。

解决方法

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

<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,{id: 9,{id: 10,{id: 11,{id: 1,name: 'Ken'}]
}

当我运行上面的代码时,我得到 错误:10 $ digest()迭代达到。 流产!我的控制台错误。

我已经为它创建了jsfiddle。

排序谓词仅在ng-repeat内部初始化,并且限制也应用于对象数。所以我觉得将sortby和limitTo监视者放在一起是错误的原因。

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

谁能帮我了解这是怎么回事?非常感谢您的帮助。

评论区