错误：达到10次$ digest（）迭代。 中止！ dynamicsorting谓词

我有下面的代码重复并显示用户的名字和他的分数：

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

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

我已经创build了jsfiddle相同。

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

sorting谓词仅在ng-repeat内部初始化，并且对象的数量也受到限制。 所以我觉得把sortby和limitTo都放在一起是导致错误的原因。

如果$ scope.reverse是false（分数的升序），那么它不会出错。

任何人都可以帮我理解这里有什么问题吗？ 非常感谢您的帮助。

Answer 1

请检查这个jsFiddle： http : //jsfiddle.net/bmleite/Hp4W7/ 。 （代码基本上是相同的你张贴，但我用一个元素，而不是窗口绑定滚动事件）。

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

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

这将导致一个错误消息：

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

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

更新：

这是你的问题：

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

在渲染过程中，你不应该改变对象/模型，否则它会强制一个新的渲染（因此会导致一个循环 ，这会导致'Error：10 $ digest（）'迭代到达中止！' ）。

如果要更新模型，请在控制器或指令上进行，而不要在视图中进行。 angularjs文档build议不要完全使用 ng-init来避免这种情况：

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

这里有一个工作示例的jsFiddle： http : //jsfiddle.net/bmleite/7ecYd/3/

Answer 2

这个错误的原因是我…

 ng-if="{{myTrustSrc(chat.src)}}" 

在我的模板

它导致我的控制器中的函数myTrustSrc被无限循环调用。 如果我从这行删除ng-if，那么问题就解决了。

 <iframe ng-if="chat.src" id='chat' name='chat' class='chat' ng-src="{{myTrustSrc(chat.src)}}"></iframe> 

只有在不使用ng-if的情况下才能调用该函数。 我仍然想知道为什么用ng-src多次调用这个函数？

这是控制器中的function

 $scope.myTrustSrc = function(src) { return $sce.trustAsResourceUrl(src); } 

Answer 3

我有另外一个这样的例子。 希望它有助于未来的参考。 我正在使用AngularJS 1.4.1。

我有这个标记与多个调用自定义指令：

 <div ng-controller="SomeController"> <myDirective data="myData.Where('IsOpen',true)"></myDirective> <myDirective data="myData.Where('IsOpen',false)"></myDirective> </div> 

myData是一个数组，而Where()是一个扩展方法，它遍历数组返回一个新数组，其中包含IsOpen属性与第二个参数中的bool值匹配的原始数据项。

在控制器中，我设置$scope.data像这样：

 DataService.getData().then(function(results){ $scope.data = results; }); 

像上面的标记一样，从指令中调用Where()扩展方法是个问题。 为了解决这个问题，我将调用的扩展方法移到了控制器中，而不是标记：

 <div ng-controller="SomeController"> <myDirective data="openData"></myDirective> <myDirective data="closedData"></myDirective> </div> 

和新的控制器代码：

 DataService.getData().then(function(results){ $scope.openData = results.Where('IsOpen',true); $scope.closedData = results.Where('IsOpen',false); }); 

Answer 4

对我来说，是我把一个函数结果作为双向绑定input'='传递给每次创build一个新对象的指令。

所以我有这样的事情：

 <my-dir> <div ng-repeat="entity in entities"> <some-other-dir entity="myDirCtrl.convertToSomeOtherObject(entity)"></some-other-dir> </div> </my-dir> 

而我的目录上的控制器方法是

 this.convertToSomeOtherObject(entity) { var obj = new Object(); obj.id = entity.Id; obj.value = entity.Value; [..] return obj; } 

当我做了

 this.convertToSomeOtherObject(entity) { var converted = entity; converted.id = entity.Id; converted.value = entity.Value; [...] return converted; } 

解决问题！

希望这会帮助一个人:)

Answer 5

这很奇怪…我得到了完全相同的错误，来自不同的事情。 当我创build我的控制器时，我传递了$ location参数，如下所示：

 App.controller('MessageController', function ($scope, $http, $log, $location, $attrs, MessageFactory, SocialMessageFactory) { // controller code }); 

这被certificate是一个错误https://github.com/angular/angular.js/issues/1417当我们使用第三方库或纯JS来操纵一些具体的（这里window.location）下一个消息的angular度会吹这个错误。;

所以我只是从控制器创build参数中删除了$ location ，并且它再次运行，没有这个错误。 或者，如果您绝对需要从angular度使用$ location，则必须删除模板页面链接中的每个<a href="#">link</a> ，而是写入href =“” 。 为我工作。

希望有一天能有所帮助。

Answer 6

对于初学者来说，忽略所有的答案，告诉你使用$ watch。 Angular已经从一个监听器开始工作了。 我向你保证，你只是在这个方向思考而使事情变得复杂。

忽略所有告诉你用户$超时的答案。 您无法知道页面加载需要多长时间，因此这不是最佳解决scheme。

您只需要知道页面何时完成渲染。

 <div ng-app='myApp'> <div ng-controller="testctrl"> <label>{{total}}</label> <table> <tr ng-repeat="item in items track by $index;" ng-init="end($index);"> <td>{{item.number}}</td> </tr> </table> </div> 

 var app = angular.module('myApp', ["testctrl"]); var controllers = angular.module("testctrl", []); controllers.controller("testctrl", function($scope) { $scope.items = [{"number":"one"},{"number":"two"},{"number":"three"}]; $scope.end = function(index){ if(index == $scope.items.length -1 && typeof $scope.endThis == 'undefined'){ /// DO STUFF HERE $scope.total = index + 1; $scop.endThis = true; } } }); 

通过$ index追踪ng-repeat，当数组的长度等于索引时停止循环，并执行你的逻辑。

https://jsfiddle.net/jlynch83/hb1dg7jf/16/

Answer 7

如果您使用angular度从您的浏览器控制台删除ng存储configuration文件。 这不是一个普遍的解决scheme它在我的情况下工作。

在Chrome F12->资源 – >本地存储

Answer 8

在将Firefox升级到版本51之后，发生了这种情况。 clearing the cache ，问题消失了。

Answer 9

我有类似的错误，因为我已经定义

纳克级= “GetLink（）”

代替

NG-点击= “GetLink（）”

Answer 10

在解决这个问题之前，像这样：

  { field : 'appId', cellTemplate : '<a href="javascript:void(0);" ng-click="modify(row.entity)" style="color:Blue">Edit</a><a href="#" ng-click="review(row.entity)" style="margin:5px;color:Blue">View</a>', displayName : 'operation' } 

解决这个问题后，像这样：

  { field : 'appId', cellTemplate : '<a href="javascript:void(0);" ng-click="modify(row.entity)" style="color:Blue">Edit</a><a href="javascript:void(0);" ng-click="review(row.entity)" style="margin:5px;color:Blue">View</a>', displayName : 'operation' } 

如果你想在这个cellTemplate中使用<a></a> ，你可以使用<a href="javascript:void(0);" > </a> <a href="javascript:void(0);" > </a>而不是<a href="#" > </a>它为我工作！