Angularjs 错误:已达到10$digest()迭代。流产!使用动态排序谓词

Angularjs 错误:已达到10$digest()迭代。流产!使用动态排序谓词,angularjs,javascript-framework,Angularjs,Javascript Framework,我有以下代码,重复并显示用户的姓名和分数: <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 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>
当我运行上述代码时,我得到了错误:达到了10$digest()迭代次数。流产我的控制台中出现错误

我也为同样的目标而创造

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

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

有人能帮我理解这里出了什么问题吗?非常感谢您的帮助。

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

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

$scope.$watch('users', function(value) {
  $scope.users = [];
});
这将导致出现错误消息:

未捕获错误:已达到10$digest()迭代。流产
观察者 在过去5次迭代中激发:

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

更新:

这就是你的问题:

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

您不应该在渲染过程中更改对象/模型,否则,它将强制执行新渲染(并因此导致循环,从而导致“错误:10$digest()迭代已达到。中止!”)

如果要更新模型,请在控制器或指令上执行,而不要在视图上执行。angularjs记录了
ng init
以避免此类情况:

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


下面是一个示例。

对我来说,这个错误的原因是

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>

很奇怪。。。我有完全相同的错误,来自不同的东西。创建控制器时,我传递了$location参数,如下所示:

App.controller('MessageController', function ($scope, $http, $log, $location, $attrs, MessageFactory, SocialMessageFactory) {
   // controller code
});
这被证明是一个错误 当我们使用第三方库或纯JS来处理一些细节(这里是window.location)时,angular的下一个摘要将抛出这个错误

因此,我只是从控制器创建参数中删除了$location,它再次工作,没有出现此错误。 或者,如果您确实需要使用angular中的$location,则必须删除模板页面链接中的每一个
,而是编写href=“”。为我工作


希望有一天能有所帮助。

我还有另一个导致这种情况的例子。希望它能为将来的参考提供帮助。我使用的是AngularJS 1.4.1

我对自定义指令进行了多次调用:

<div ng-controller="SomeController">
    <myDirective data="myData.Where('IsOpen',true)"></myDirective>
    <myDirective data="myData.Where('IsOpen',false)"></myDirective>
</div>
从指令调用
Where()
扩展方法就是问题所在,就像上面的标记一样。为了解决此问题,我将对扩展方法的调用移到控制器中,而不是标记中:

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

对我来说,就是我将一个函数结果作为双向绑定输入“=”传递给一个每次都创建新对象的指令

所以我有这样的想法:

<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 converted = entity;
   converted.id = entity.Id;
   converted.value = entity.Value;
   [...]
   return converted;
}
解决了这个问题


希望这将有助于某人:)

如果您使用angular,请从浏览器控制台中删除ng存储配置文件。 这不是一个通用的解决方案,但在我的情况下它起了作用


对于初学者,请忽略所有答案,告诉您使用$watch。Angular已经在侦听器上工作了。我向你保证,你只是朝着这个方向思考,就把事情复杂化了

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

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

<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>
通过$index跟踪ng repeat,当数组长度等于索引时,停止循环并执行逻辑


在将Firefox升级到51版之后,这种情况就发生在我身上。清除缓存后,问题消失了。

我也有类似的错误,因为我定义了

ng class=“GetLink()”

而不是

ng click=“GetLink()”


派对很晚了,但我的问题发生了,因为angular 1.5.8中的ui路由器存在缺陷。值得一提的是,这个错误仅在我第一次运行应用程序时出现,之后不会再次出现。 从github解决了我的问题。 基本上,错误涉及
$urlRouterProvider。否则(“/home”)
解决方案是这样一种变通方法:

DataService.getData().then(function(results){
    $scope.data = results;
});
$urlRouterProvider.otherwise(function($injector, $location) {
   var $state = $injector.get("$state");
   $state.go("your-state-for-home");
});

我在角度树控件的上下文中得到了这个错误。 在我的例子中,是树选项。我正在从函数返回treeOptions()。它总是返回同一个对象。但Angular神奇地认为这是一个新的对象,然后引发了一个消化循环。引起反复的摘要。
解决方案是将树选项绑定到范围。只分配一次

在从angular 1.6->1.7升级后,当使用$sce.trustAsResourceUrl()作为从ng src调用的函数的返回值时,我遇到了这种情况。你可以看到上面提到的这个问题

就我而言,我不得不改变以下几点

<source ng-src="{{trustSrc(someUrl)}}" type='video/mp4' />
trustSrc = function(url){
    return $sce.trustAsResourceUrl(url);
};

trustSrc=函数(url){
返回$sce.trustAsResourceUrl(url);
};


调用自定义排序过滤器时,我使用AngularJS 1.3.9得到了完全相同的错误


在我删除它之后,一切都很好。

如果您删除If语句,它是否仍然出错?谢谢您的回复Mathew!我把问题诊断错了
this.convertToSomeOtherObject(entity) {
   var converted = entity;
   converted.id = entity.Id;
   converted.value = entity.Value;
   [...]
   return converted;
}
<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;
 }
}
});
$urlRouterProvider.otherwise(function($injector, $location) {
   var $state = $injector.get("$state");
   $state.go("your-state-for-home");
});
<source ng-src="{{trustSrc(someUrl)}}" type='video/mp4' />
trustSrc = function(url){
    return $sce.trustAsResourceUrl(url);
};
<source ng-src='{{trustedUrl}} type='video/mp4' />
trustedUrl = $sce.trustAsResourceUrl(someUrl);