javascript - reloadwithdebuginfo - angularjs build prod

Angular JS: IE Error: 10 $ digest() iteraciones alcanzadas. Abortando

Question

Soy nuevo en Angular y tengo un problema relacionado con IE.

Aquí está el error de IE que estoy recibiendo.

Webpage error details

User Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Timestamp: Thu, 13 Dec 2012 04:00:46 UTC


Message: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: function $locationWatch() {/n      var oldUrl = $browser.url();/n/n      if (!changeCounter || oldUrl != $location.absUrl()) {/n/tchangeCounter++;/n/t$rootScope.$evalAsync(function() {/n/t  if ($rootScope.$broadcast(''$locationChangeStart'', $location.absUrl(), oldUrl)./n/t      defaultPrevented) {/n/t    $location.$$parse(oldUrl);/n/t  } else {/n/t    $browser.url($location.absUrl(), $location.$$replace);/n/t    $location.$$replace = false;/n/t    afterLocationChange(oldUrl);/n/t  }/n/t});/n      }/n/n      return changeCounter;/n    }; newVal: 7; oldVal: 6"],["fn: function $locationWatch() {/n      var oldUrl = $browser.url();/n/n      if (!changeCounter || oldUrl != $location.absUrl()) {/n/tchangeCounter++;/n/t$rootScope.$evalAsync(function() {/n/t  if ($rootScope.$broadcast(''$locationChangeStart'', $location.absUrl(), oldUrl)./n/t      defaultPrevented) {/n/t    $location.$$parse(oldUrl);/n/t  } else {/n/t    $browser.url($location.absUrl(), $location.$$replace);/n/t    $location.$$replace = false;/n/t    afterLocationChange(oldUrl);/n/t  }/n/t});/n      }/n/n      return changeCounter;/n    }; newVal: 8; oldVal: 7"],["fn: function $locationWatch() {/n      var oldUrl = $browser.url();/n/n      if (!changeCounter || oldUrl != $location.absUrl()) {/n/tchangeCounter++;/n/t$rootScope.$evalAsync(function() {/n/t  if ($rootScope.$broadcast(''$locationChangeStart'', $location.absUrl(), oldUrl)./n/t      defaultPrevented) {/n/t    $location.$$parse(oldUrl);/n/t  } else {/n/t    $browser.url($location.absUrl(), $location.$$replace);/n/t    $location.$$replace = false;/n/t    afterLocationChange(oldUrl);/n/t  }/n/t});/n      }/n/n      return changeCounter;/n    }; newVal: 9; oldVal: 8"],["fn: function $locationWatch() {/n      var oldUrl = $browser.url();/n/n      if (!changeCounter || oldUrl != $location.absUrl()) {/n/tchangeCounter++;/n/t$rootScope.$evalAsync(function() {/n/t  if ($rootScope.$broadcast(''$locationChangeStart'', $location.absUrl(), oldUrl)./n/t      defaultPrevented) {/n/t    $location.$$parse(oldUrl);/n/t  } else {/n/t    $browser.url($location.absUrl(), $location.$$replace);/n/t    $location.$$replace = false;/n/t    afterLocationChange(oldUrl);/n/t  }/n/t});/n      }/n/n      return changeCounter;/n    }; newVal: 10; oldVal: 9"],["fn: function $locationWatch() {/n      var oldUrl = $browser.url();/n/n      if (!changeCounter || oldUrl != $location.absUrl()) {/n/tchangeCounter++;/n/t$rootScope.$evalAsync(function() {/n/t  if ($rootScope.$broadcast(''$locationChangeStart'', $location.absUrl(), oldUrl)./n/t      defaultPrevented) {/n/t    $location.$$parse(oldUrl);/n/t  } else {/n/t    $browser.url($location.absUrl(), $location.$$replace);/n/t    $location.$$replace = false;/n/t    afterLocationChange(oldUrl);/n/t  }/n/t});/n      }/n/n      return changeCounter;/n    }; newVal: 11; oldVal: 10"]]
Line: 7859
Char: 6
Code: 0
URI: http://localhost:8080/__assets__/lib/angular/angular.js

Esto no está sucediendo en ningún otro navegador excepto en IE 8 e IE 9.

Tengo un reloj mirando un objeto de filtrado de contenido que incluye un filtro de ubicación.

Mi pregunta con esto es por qué no sucede en ningún otro navegador que no sea IE y qué debo hacer para deshacerme de esto. Gracias por adelantado.

Answer 1

TLDR

Si está utilizando ui-router , también puede usar

$state.go(''details'', {id:item.ID});

Fondo

Estaba usando la siguiente función para navegar desde una vista de lista a una vista de detalles para que pueda hacer clic en cualquier cosa con ng-click="details(item)" , en mi caso, hay tr en la lista:

$scope.details = function (item) {
    $window.location.href = "#/details/" + item.ID;
}

Pero estaba obteniendo las temidas 10 $digest() iterations reached en IE.

Para tu información

Puse un punto de interrupción en AngularJS v1.2.0rc1 línea angular.js 7650 siguiendo la respuesta de Tiago.

// update browser
var changeCounter = 0;
$rootScope.$watch(function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  if (!changeCounter || oldUrl != $location.absUrl()) {
    changeCounter++; /* <-- breakpoint here, line 7650 */
    $rootScope.$evalAsync(function() {
      if ($rootScope.$broadcast(''$locationChangeStart'', $location.absUrl(), oldUrl).
          defaultPrevented) {
        $location.$$parse(oldUrl);
      } else {
        $browser.url($location.absUrl(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
});

Resultados

Salida de Chrome

• El punto de interrupción solo se alcanzó una vez que se cargó la página de detalles y solo una vez.
• oldUrl (es decir, $browser.url() estaba reportando la url antigua (es decir, la lista uno)
• $location.absUrl() estaba reportando la url de detalles.

Salida de IE7,8

• El punto de ruptura fue golpeado continuamente.
• oldUrl (es decir, $browser.url() estaba reportando la nueva url (es decir, la información detallada)
• $location.absUrl() todavía estaba reportando la url de la lista.

Answer 2

Estaba enfrentando un problema en IE 10. Estaba usando

window.location.href = ''#/'';

para cambiar la ruta. Reemplazándolo con el siguiente código

$location.path(''/'');

resolvió el problema

Answer 3

Puedo decir por su informe de errores que tiene un $ watch para una variable changeCounter, y esta función de observador:

function $locationWatch() {
    var oldUrl = $browser.url();
    if (!changeCounter || oldUrl != $location.absUrl()) {
        changeCounter++;
        $rootScope.$evalAsync(function () {
            if ($rootScope.$broadcast(''$locationChangeStart'', $location.absUrl(), oldUrl)
                .defaultPrevented) {
                $location.$$parse(oldUrl);
            } else {
                $browser.url($location.absUrl(), $location.$$replace);
                $location.$$replace = false;
                afterLocationChange(oldUrl);
            }
        });
    }
    return changeCounter;
};

Y el changeCounter obtiene su valor incrementado si $ browser.url () no es igual a $ location.absUrl (). Como la función $ watch solo puede hacer 10 ciclos de cambio / reacción, se producirá un error después de esas 10 iteraciones. A medida que cambia el valor que está viendo, eventualmente se rompe.

Yo registraría esos valores - $ location.absUrl () y $ browser.url (), y vería por qué coinciden en otros navegadores, pero no en ie.

Answer 4

Tiago Roldão definitivamente tiene razón. Tuve exactamente el mismo problema. Después de la depuración, me di cuenta en mi código que tengo

location.hash = "#/app/" + id;

lo que causa el problema de bucle infinito. Después de algunas investigaciones, encontré esto

$location.path("/apps/" + id);

Lo que resuelve mi problema perfectamente.

Answer 5

Tuve el mismo problema al usar AngularJS v1.2.13 en IE9, IE10, al llamar a $ window.history.back () (especialmente en Windows Phone).

Parece que la causa principal es que $ window.history.back () en IE cambia el href justo antes de que se active $ locationWatch (), por lo tanto, oldUrl contendría la nueva URL y eso arroja el angular en un infinito $ digest.

La solución inmediata es reemplazar las llamadas a $ window.history.back () con lo siguiente:

setTimeout(function () 
{
    $window.history.back();
}, 0);

Answer 6

Tuve el mismo problema con el error que se veía igual. Chrome / FF funcionó bien, pero IE falló. He hecho clic en algunos enlaces en mi aplicación y algunas veces recibí este error y otras veces no.

1) En mi opinión, tenía pocos enlaces que parecían esto:

<a href="#" ng-click="addIP(ip)">Add some IP</a>

2) Haga clic en el controlador para los enlaces que agregaron un nuevo objeto en la colección de IpRanges como este:

$scope.IpRanges.push(ip);

3) La propia colección se vinculó a la vista con ng-repeat, y pensé que de alguna manera IE no podía manejar esta situación bien - probablemente el orden de enlace / agregando / aplicando eventos no era correcto o bien ... También después de hacer clic en los enlaces I se agregó el símbolo # a la url, y algunas veces parpadeó, y luego recibí un error. Así que eliminé el atributo href y todo funcionó bien:

<a href="" ng-click="addCurrentIP()">Add as allowed IP</a>

Probablemente es mejor usar spans o divs para situaciones similares.

Answer 7

Tuve este problema al intentar redirigir a otra página como

$window.location.href = ''#/path/''

resuelto cambiando a:

$location.path(''/path/'');