错误:已达到 10 次 $digest() 迭代.中止！使用动态 sortby 谓词 [英] Error: 10 $digest() iterations reached. Aborting! with dynamic sortby predicate

问题描述

我有以下代码重复并显示用户的姓名和他的分数:

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

以及相应的角度控制器.

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，姓名:'肯'}]}

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

我为此创建了 jsfiddle.

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

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

谁能帮我理解这里有什么问题?非常感谢您的帮助.

解决方案

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

据我所知，你贴的代码没有问题.您提到的错误通常发生在您对属性创建更改循环时.例如，当您观察某个属性的变化，然后在侦听器上更改该属性的值时:

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

这将导致错误消息:

<块引用>

未捕获的错误:已达到 10 次 $digest() 迭代.正在中止！
观察者在最后 5 次迭代中触发:...

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

更新:

这是你的问题:

您不应该在渲染期间或以其他方式更改对象/模型，它会强制进行新的渲染(从而导致 循环，这会导致 'Error: 10 $digest()达到迭代次数.中止！').

如果要更新模型，请在控制器或指令上进行，而不要在视图上进行.angularjs 文档 建议不要使用 ng-init正是为了避免这些情况:

<块引用>

在模板中使用 ngInit 指令(仅适用于玩具/示例应用程序，不适用于推荐用于实际应用)

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

I have the following code which repeats and displays the name of the user and his score:

<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>

And the corresponding 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'}]
}

When I run the above code, I get the Error: 10 $digest() iterations reached. Aborting! error in my console.

I have created jsfiddle for same.

The sort predicate is being initialized only inside the ng-repeat and also the limit is being applied on the number of objects. so I feel having both the sortby and limitTo watchers together is the reason for error.

If the $scope.reverse is false (ascending order of score), then it does not error.

Can anyone help me understand what is wrong here? Much appreciate your help.

解决方案

Please check this jsFiddle. (The code is basically the same you posted but I use an element instead of the window to bind the scroll events).

As far as I can see, there is no problem with the code you posted. The error you mentioned normally occurs when you create a loop of changes over a property. For example, like when you watch for changes on a certain property and then change the value of that property on the listener:

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

This will result on an error message:

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

Make sure that your code doesn't have this kind of situations.

update:

This is your problem:

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

You shouldn't change objects/models during the render or otherwise, it will force a new render (and consequently a loop, which causes the 'Error: 10 $digest() iterations reached. Aborting!').

If you want to update the model, do it on the Controller or on a Directive, never on the view. angularjs documentation recommends not to use the ng-init exactly to avoid these kinds of situations:

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

Here's a jsFiddle with a working example.

这篇关于错误:已达到 10 次 $digest() 迭代.中止！使用动态 sortby 谓词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！