angularjs - the - Error: se alcanzaron 10 $ digest() iteraciones. Aborto! con predicado sortby dinámico
orderby angularjs (11)
En mi caso, fueron las opciones de árbol. Estaba devolviendo treeOptions () desde una función. Siempre devolvía el mismo objeto. Pero Angular cree mágicamente que es un objeto nuevo y luego causa que comience un ciclo de digestión. Causando una recursión de resúmenes. La solución fue unir treeOptions al alcance. Y asignarlo solo una vez.
Tengo el siguiente código que repite y muestra el nombre del usuario y su puntaje:
<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>
Y el controlador angular correspondiente.
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''}]
}
Cuando ejecuto el código anterior, aparece el error: se han alcanzado las iteraciones de 10 $ digest (). Aborto! error en mi consola.
He creado jsfiddle para el mismo.
http://jsfiddle.net/JSWorld/7ecYd/1/
El predicado de clasificación se está iniciando solo dentro de la repetición ng y también se está aplicando el límite en la cantidad de objetos. así que siento que tener ambos sortby y limitTo watchers juntos es la razón del error.
Si $ scope.reverse es falso (orden ascendente de puntaje), entonces no tiene error.
¿Alguien puede ayudarme a entender qué está mal aquí? Mucho aprecio tu ayuda.
Es extraño ... Tengo exactamente el mismo error, provengo de algo diferente. Cuando creo mi controlador pasé el parámetro $ location, así:
App.controller(''MessageController'', function ($scope, $http, $log, $location, $attrs, MessageFactory, SocialMessageFactory) {
// controller code
});
Se comprobó que esto es un error https://github.com/angular/angular.js/issues/1417 cuando usamos bibliotecas de terceros o JS puro para manipular algunos detalles (aquí window.location) el próximo digest de angular soplará este error.
Así que simplemente eliminé $ ubicación del parámetro de creación del controlador, y funcionó de nuevo, sin este error. O si necesita absolutamente usar la ubicación $ de angular, debe eliminar todos los <a href="#">link</a> en los enlaces de su página de plantilla, y escribir href = "" . Trabajó para mi.
Espero que pueda ayudar un día.
Esto me pasó justo después de actualizar Firefox a la versión 51. Después de clearing the cache , el problema desapareció.
La causa de este error para mí fue ...
ng-if="{{myTrustSrc(chat.src)}}"
en mi plantilla
Hace que se llame a la función myTrustSrc en mi controlador en un bucle infinito. Si elimino el ng-if de esta línea, entonces el problema está resuelto.
<iframe ng-if="chat.src" id=''chat'' name=''chat'' class=''chat'' ng-src="{{myTrustSrc(chat.src)}}"></iframe>
La función solo se llama unas pocas veces cuando ng-if no se utiliza. Todavía me pregunto por qué la función se llama más de una vez con ng-src?
Esta es la función en el controlador
$scope.myTrustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
}
Para empezar, ignore todas las respuestas y dígale que use $ watch. Angular funciona ya de un oyente. Te garantizo que estás complicando las cosas simplemente pensando en esta dirección.
Ignora todas las respuestas que indican que el usuario agotó el tiempo de espera. No puede saber cuánto tardará la página en cargar, por lo tanto, esta no es la mejor solución.
Solo necesita saber cuándo la página está lista.
<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;
}
}
});
Rastree ng-repeat por $ index y cuando la longitud de la matriz sea igual al índice detenga el ciclo y haga su lógica.
Para mí fue que estaba pasando un resultado de función como una entrada de enlace bidireccional ''='' a una directiva que creaba un nuevo objeto cada vez.
entonces tuve algo así:
<my-dir>
<div ng-repeat="entity in entities">
<some-other-dir entity="myDirCtrl.convertToSomeOtherObject(entity)"></some-other-dir>
</div>
</my-dir>
y el método del controlador en my-dir era
this.convertToSomeOtherObject(entity) {
var obj = new Object();
obj.id = entity.Id;
obj.value = entity.Value;
[..]
return obj;
}
que cuando hice para
this.convertToSomeOtherObject(entity) {
var converted = entity;
converted.id = entity.Id;
converted.value = entity.Value;
[...]
return converted;
}
¡resuelve el problema!
Espero que esto ayude a alguien :)
Por favor, consulte este jsFiddle: http://jsfiddle.net/bmleite/Hp4W7/ . (El código es básicamente el mismo que publicó pero utilizo un elemento en lugar de la ventana para enlazar los eventos de desplazamiento).
Por lo que puedo ver, no hay problema con el código que publicaste. El error que mencionó normalmente ocurre cuando crea un bucle de cambios sobre una propiedad. Por ejemplo, como cuando observa cambios en una propiedad determinada y luego cambia el valor de esa propiedad en el oyente:
$scope.$watch(''users'', function(value) {
$scope.users = [];
});
Esto dará como resultado un mensaje de error:
Error no detectado: se han alcanzado 10 iteraciones de digest (). Aborto!
Los vigilantes dispararon en las últimas 5 iteraciones: ...
Asegúrese de que su código no tenga este tipo de situaciones.
actualizar:
Este es tu problema:
<div ng-init="user.score=user.id+1">
No debe cambiar objetos / modelos durante el renderizado o de lo contrario forzará un nuevo renderizado (y, en consecuencia, un bucle , lo que ocasiona que se alcancen las iteraciones de ''Error: 10 $ digest ()'' Aborting! '' ).
Si desea actualizar el modelo, hágalo en el Controlador o en una Directiva, nunca en la vista. La documentación de angularjs recomienda no utilizar ng-init exactamente para evitar este tipo de situaciones:
Utilice la directiva ngInit en plantillas (solo para aplicaciones de juguetes / ejemplo, no recomendadas para aplicaciones reales)
Aquí hay un jsFiddle con un ejemplo de trabajo: http://jsfiddle.net/bmleite/7ecYd/3/
Si usa angular, elimine el perfil ng-storage de la consola de su navegador. No es un problema de solución general. Funcionó en mi caso.
Tengo otro ejemplo de algo que causó esto. Espero que ayude para referencia futura. Estoy usando AngularJS 1.4.1.
Tenía este marcado con múltiples llamadas a una directiva personalizada:
<div ng-controller="SomeController">
<myDirective data="myData.Where(''IsOpen'',true)"></myDirective>
<myDirective data="myData.Where(''IsOpen'',false)"></myDirective>
</div>
myData es una matriz y Where() es un método de extensión que itera sobre la matriz y devuelve una nueva matriz que contiene elementos del original donde la propiedad IsOpen coincide con el valor bool en el segundo parámetro.
En el controlador, configuré $scope.data siguiente manera:
DataService.getData().then(function(results){
$scope.data = results;
});
Llamar al método de extensión Where() desde la directiva como en el marcado anterior fue el problema. Para solucionar este problema, moví la llamada al método de extensión en el controlador en lugar del marcado:
<div ng-controller="SomeController">
<myDirective data="openData"></myDirective>
<myDirective data="closedData"></myDirective>
</div>
y el nuevo código de controlador:
DataService.getData().then(function(results){
$scope.openData = results.Where(''IsOpen'',true);
$scope.closedData = results.Where(''IsOpen'',false);
});
Ya era tarde para la fiesta pero mi problema estaba sucediendo porque hay un defecto en el router UI en angular 1.5.8. Una cosa para mencionar es que este error apareció solo la primera vez que ejecuté la aplicación y no volvería a ocurrir después. Esta publicación de github resolvió mi problema: https://github.com/angular-ui/ui-router/issues/2183 Básicamente el error involucra $urlRouterProvider.otherwise("/home") La solución fue una solución como esta:
$urlRouterProvider.otherwise(function($injector, $location) {
var $state = $injector.get("$state");
$state.go("your-state-for-home");
});
tuve el error similar, porque había definido
ng-class = "GetLink ()"
en lugar de
ng-click = "GetLink ()"