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'ai eu la même erreur, parce que j'avais défini

ng-class="GetLink()"

au lieu de

ng-click="GetLink()"

Answer 2

Cela m'est arrivé après la mise à jour d'Angular 1.6 -> 1.7 lors de l'utilisation de $sce.trustAsResourceUrl() comme valeur de retour d'une fonction appelée depuis ng-src. Vous pouvez voir ce problème mentionné aquí .

Dans mon cas, j'ai dû modifier les éléments suivants.

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

Answer 3

J'ai obtenu exactement la même erreur en utilisant AngularJS 1.3.9 quand, dans mon filtre de tri personnalisé, j'ai invoqué Array.reverse()

Après l'avoir enlevé, tout allait bien.