错误:达到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(分数的升序),那么它不会出错。

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

请检查这个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/

这个错误的原因是我…

 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); } 

我有另外一个这样的例子。 希望它有助于未来的参考。 我正在使用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); }); 

对我来说,是我把一个函数结果作为双向绑定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; } 

解决问题!

希望这会帮助一个人:)

这很奇怪…我得到了完全相同的错误,来自不同的事情。 当我创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 =“” 。 为我工作。

希望有一天能有所帮助。

对于初学者来说,忽略所有的答案,告诉你使用$ 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/

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

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

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

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

纳克级= “GetLink()”

代替

NG-点击= “GetLink()”

在解决这个问题之前,像这样:

  { 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>它为我工作!