错误：达到10 $摘要（）迭代。中止！动态sortby predicate [英] Error: 10 $digest() iterations reached. Aborting! with dynamic sortby predicate

问题描述

我有以下的code这重复并显示用户的名字和他的评分：

I have the following code which repeats and displays 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>

和相应的角度控制器。

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'}]
}

当我运行上面的code，我得到的错误：$ 10摘要（）迭代到达。中止！错误在我的控制台。

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

我创建的jsfiddle了一样。

I have created jsfiddle for same.

http://jsfiddle.net/JSWorld/7ecYd/1/

的排序predicate正在initalized仅纳克重复内也正在对对象的数量所施加的限制。所以我觉得有两个sortby和limitTo观察家在一起是错误的原因。

The sort predicate is being initalized 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.

如果在$ scope.reverse是假的（得分升序排序），那么它没有错误。

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

谁能帮我明白什么是错在这里？大部分AP preciate你的帮助。

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

推荐答案

请检查此的jsfiddle： http://jsfiddle.net/bmleite / Hp4W7 / 。 （在code基本上是您发布相同的，但我使用的元素，而不是窗口的绑定滚动事件）。

Please check this jsFiddle: http://jsfiddle.net/bmleite/Hp4W7/. (The code is basically the same you posted but I use an element instead of the window to bind the scroll events).

据我所看到的，与code你贴没有问题。当你创建一个以上属性改变的循环你通常提到的错误发生。例如，就像当你看对某个属性的更改，然后更改的侦听器属性的值：

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:

未捕获的错误：$ 10摘要（）迭代到达。中止！结果
  看守
  在过去的5次迭代触发：...

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

请确保您的code没有这样的情况。

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

更新：

这是你的问题：

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

您不应该在更改对象/模型渲染或否则将强制新的渲染（因此一个的循环的，这将导致的'错误：$ 10摘要（）迭代达到。中止！的）。

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!').

如果您想更新模型，做它的控制器或一个指令，从来没有在该视图。 angularjs文档建议不要使用中的 NG-INIT 正是为了避免这类情况：

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 kind of situations:

在模板（玩具用ngInit指令/例子只应用程序，不
  建议在实际应用）

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

下面是一个的jsfiddle与工作的例子： http://jsfiddle.net/bmleite/7ecYd/3/

Here's a jsFiddle with an working example: http://jsfiddle.net/bmleite/7ecYd/3/

这篇关于错误：达到10 $摘要（）迭代。中止！动态sortby predicate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！