Erreur : 10 itérations $digest() atteintes. Abandon ! avec le prédicat sortby dynamique

Question

J'ai le code suivant qui répète et affiche le nom de l'utilisateur et son 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>

Et le contrôleur angulaire correspondant.

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

Lorsque j'exécute le code ci-dessus, j'obtiens le message suivant Erreur : 10 itérations de $digest() atteintes. Abandon ! erreur dans ma console.

J'ai créé jsfiddle pour le même.

Le prédicat de tri n'est initialisé qu'à l'intérieur du ng-repeat et la limite est également appliquée au nombre d'objets. Je pense donc que le fait d'avoir les deux surveillants sortby et limitTo ensemble est la raison de l'erreur.

Si la valeur de $scope.reverse est fausse (ordre ascendant du score), alors il n'y a pas d'erreur.

Quelqu'un peut-il m'aider à comprendre ce qui ne va pas ici ? J'apprécie beaucoup votre aide.

Answer 1

J'arrive un peu tard, mais mon problème est dû à un défaut de ui-router dans angular 1.5.8. Une chose à mentionner est que cette erreur n'est apparue que la première fois que j'ai exécuté l'application et qu'elle ne s'est pas reproduite par la suite. Ce poste de github a résolu mon problème. En gros, l'erreur consiste à $urlRouterProvider.otherwise("/home") La solution était une solution de contournement comme celle-ci :

$urlRouterProvider.otherwise(function($injector, $location) {
   var $state = $injector.get("$state");
   $state.go("your-state-for-home");
});

Answer 2

C'est bizarre... J'ai exactement la même erreur, qui vient d'une chose différente. Lorsque j'ai créé mon contrôleur, j'ai passé le paramètre $location, comme ceci :

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

Cela s'est avéré être un bug lorsque nous utilisons des bibliothèques tierces ou du JS pur pour manipuler certaines spécificités (ici window.location) le prochain digest d'angular fera sauter cette erreur.

J'ai donc simplement supprimé le $location du paramètre de création du contrôleur, et cela a fonctionné à nouveau, sans cette erreur. Ou si vous avez absolument besoin d'utiliser le $location d'angular, vous devez supprimer chaque <a href="#">link</a> dans les liens de votre page modèle, et écrivez plutôt href="" . Cela a fonctionné pour moi.

J'espère que cela pourra vous aider un jour.

Answer 3

J'ai obtenu cette erreur dans le contexte du contrôle de l'arbre angulaire. Dans mon cas, il s'agissait des options de l'arbre. Je retournais treeOptions() à partir d'une fonction. Elle retournait toujours le même objet. Mais Angular pense magiquement que c'est un nouvel objet et provoque alors un cycle de digestion pour démarrer. Causant une récursion de digests. La solution était de lier les options de l'arbre à la portée. Et de l'assigner une seule fois.

Answer 4

Si vous utilisez angular, supprimez le profil ng-storage de la console de votre navigateur. Ce n'est pas une solution générale mais cela a fonctionné dans mon cas.

Dans Chrome F12->Ressources->Stockage local

Answer 5

Cela m'est arrivé juste après avoir mis à jour Firefox à la version 51. Après clearing the cache le problème a disparu.