错误:达到10次$digest()迭代。中止!带有动态sortby谓词。

145
我有以下代码,它会重复显示用户的姓名和分数:
<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控制器如下。

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

当我运行上面的代码时,我的控制台会出现“Error: 10 $digest() iterations reached. Aborting!”的错误。
我已经为此创建了 jsfiddle
排序谓词仅在ng-repeat中进行初始化,并且限制应用于对象数量。因此,我认为同时具有sortby和limitTo观察程序是错误的原因。
如果$scope.reverse为false(得分升序),则不会出现错误。
请问有人能帮我理解这里出了什么问题吗?非常感谢您的帮助。

如果你移除掉这个if语句,它还会报错吗? - Mathew Berg
感谢您的回复,马修!我错误地诊断了问题。问题似乎出在sortby和limitTo过滤器上。我已经在JSFiddle中更新了问题。非常感谢您的帮助。 - Chubby Boy
这是一个Angular的问题。你需要记忆化你的函数并让它们记住状态。在https://dev59.com/72Yq5IYBdhLWcg3wkRYo#38257418上查看我的答案。 - Julio Marins
13个回答

0
这是我在升级 Firefox 到 51 版本后遇到的问题。在清除缓存后,问题就消失了。

0
我曾经遇到过类似的错误,因为我定义了

ng-class="GetLink()"

而不是

ng-click="GetLink()"


0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接