Erro: 10 iterações $ digest () atingidas. Abortando! com predicado sortby dinâmico

Eu tenho o seguinte código que repete e exibe o nome do usuário e sua pontuação:

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

E o controlador angular correspondente.

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

Quando executo o código acima, recebo as iterações Error: 10 $ digest () atingidas. Abortando! erro no meu console.

Eu criei o jsfiddle para o mesmo.

O predicado de classificação está sendo inicializado apenas dentro do ng-repeat e também o limite está sendo aplicado no número de objetos. por isso, sinto que ter tanto o sortby quanto o limitTo observadores juntos é a razão do erro.

Se o $ scope.reverse for falso (ordem crescente de pontuação), não haverá erro.

Alguém pode me ajudar a entender o que está errado aqui? Aprecio muito sua ajuda.

Por favor, verifique este jsFiddle . (O código é basicamente o mesmo que você postou, mas eu uso um elemento em vez da janela para vincular os eventos de rolagem).

Tanto quanto posso ver, não há nenhum problema com o código que você postou. O erro que você mencionou normalmente ocorre quando você cria um loop de alterações em uma propriedade. Por exemplo, como quando você observa alterações em uma determinada propriedade e altera o valor dessa propriedade no ouvinte:

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

Isso resultará em uma mensagem de erro:

Erro não capturado: 10 iterações $ digest () atingidas. Abortando!
Observadores dispararam nas últimas 5 iterações: ...

Verifique se o seu código não possui esse tipo de situação.

atualizar:

Isso é problema seu:

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

Você não deve alterar objetos / modelos durante a renderização ou de outra forma, ela forçará uma nova renderização (e consequentemente um loop , que causa as iterações 'Error: 10 $ digest () atingidas. Abortando!' ).

Se você deseja atualizar o modelo, faça-o no Controlador ou em uma Diretiva, nunca na vista. A documentação do angularjs recomenda não usarng-init exatamente o que é necessário para evitar esses tipos de situações:

Use a diretiva ngInit em modelos (apenas para aplicativos de brinquedo / exemplo, não recomendado para aplicativos reais)

Aqui está um jsFiddle com um exemplo de trabalho.

A causa desse erro para mim foi ...

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

no meu modelo

Faz com que a função myTrustSrc no meu controlador seja chamada em um loop infinito. Se eu remover o ng-if dessa linha, o problema será resolvido.

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

A função é chamada apenas algumas vezes quando ng-if não é usado. Ainda me pergunto por que a função é chamada mais de uma vez com ng-src?

Esta é a função no controlador

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

Para mim, estava passando um resultado de função como entrada de ligação bidirecional '=' para uma diretiva que criava um novo objeto todas as vezes.

então eu tinha algo assim:

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

e o método do controlador em my-dir foi

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

que quando eu fiz

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

resolveu o problema!

Espero que isso ajude alguém :)

Eu tenho outro exemplo de algo que causou isso. Espero que ajude para referência futura. Estou usando o AngularJS 1.4.1.

Eu tive essa marcação com várias chamadas para uma diretiva personalizada:

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

myDataé uma matriz e Where()é um método de extensão que itera sobre a matriz, retornando uma nova matriz que contém itens do original onde a propriedade IsOpen corresponde ao valor bool no segundo parâmetro.

No controlador, defino $scope.dataassim:

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

Chamar o Where()método de extensão da diretiva como na marcação acima foi o problema. Para corrigir esse problema, movi a chamada para o método de extensão para o controlador em vez da marcação:

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

e o novo código do controlador:

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

Muito tarde para a festa, mas meu problema estava acontecendo porque há um defeito no roteador da interface do usuário no angular 1.5.8. Uma coisa a mencionar é que esse erro apareceu apenas na primeira vez em que eu estava executando o aplicativo e não ocorreu novamente depois. Esta postagem do github resolveu meu problema. Basicamente, o erro envolve $urlRouterProvider.otherwise("/home") A solução foi uma solução alternativa como esta:

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

Para iniciantes, ignore todas as respostas com diga para usar $ watch. O Angular já funciona com um ouvinte. Eu garanto que você está complicando as coisas apenas pensando nessa direção.

Ignore todas as respostas que dizem ao usuário $ timeout. Você não pode saber quanto tempo a página levará para carregar, portanto, essa não é a melhor solução.

Você só precisa saber quando a página termina de renderizar.

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

Acompanhe o ng-repeat por $ index e quando o comprimento da matriz for igual ao índice pare o loop e faça sua lógica.

jsfiddle

Eu recebi esse erro no contexto do controle de árvore angular. No meu caso, foram as opções de árvore. Eu estava retornando treeOptions () de uma função. Sempre retornava o mesmo objeto. Mas Angular pensa magicamente que esse é um novo objeto e, em seguida, causa um ciclo de digestão. Causando uma recursão de resumos. A solução foi vincular as treeOptions ao escopo. E atribuí-lo apenas uma vez.

É estranho ... Eu tenho exatamente o mesmo erro, vindo de uma coisa diferente. Quando crio meu controlador, passei o parâmetro $ location, assim:

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

Isso provou ser um bug quando usamos bibliotecas de terceiros ou JS puro para manipular algumas especificidades (aqui window.location). O próximo resumo do angular irá causar esse erro.

Então, simplesmente removi o local $ do parâmetro de criação do controlador e ele funcionou novamente, sem esse erro. Ou, se você absolutamente precisar usar o local $ do angular, remova todos <a href="#">link</a>os links da página do seu modelo e escreva href = "" . Trabalhou para mim.

Espero que possa ajudar um dia.

Se você usar o angular, remova o perfil ng-storage do console do navegador. Não é uma solução geral que funcionou no meu caso.

No Chrome F12-> Recursos-> Armazenamento Local

Isso aconteceu comigo após a atualização do Firefox para a versão 51. Depois clearing the cache, o problema desapareceu.

eu tive o erro semelhante, porque eu tinha definido

ng-class = "GetLink ()"

ao invés de

ng-click = "GetLink ()"

Isso aconteceu comigo após a atualização do angular 1.6 -> 1.7 ao usar $ sce.trustAsResourceUrl () como o valor de retorno de uma função chamada ng-src. Você pode ver esse problema mencionado aqui .

No meu caso, tive que mudar o seguinte.

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

para

<source ng-src='{{trustedUrl}} type='video/mp4' />
trustedUrl = $sce.trustAsResourceUrl(someUrl);

Eu recebi exatamente o mesmo erro usando o AngularJS 1.3.9 quando, no meu filtro de classificação personalizado, invoquei Array.reverse ()

Depois que eu o removi, tudo ficou bem.