javascript - Angular JS: IE Error: 10 $digest() iterations reached. Aborting

Question

I'm new to Angular and I'm stuck with a issue relating IE.

Here is the IE Error that I'm getting.

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() {
      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;
    }; newVal: 7; oldVal: 6"],["fn: 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;
    }; newVal: 8; oldVal: 7"],["fn: 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;
    }; newVal: 9; oldVal: 8"],["fn: 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;
    }; newVal: 10; oldVal: 9"],["fn: 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;
    }; newVal: 11; oldVal: 10"]]
Line: 7859
Char: 6
Code: 0
URI: http://localhost:8080/__assets__/lib/angular/angular.js

This is not happening in any other browser but IE 8 and IE 9.

I have a watch looking at a content filtering object which includes a location filter.

My question with this is why doesn't it happen on any other browser but IE and what should I do to get rid of this. Thanks in advance.

Answer 1

Tiago Rold?o is definitely right. I had exact the same issue. After debug, I realized in my code I have

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

which causes the infinitely loop issue. After some research, I found this

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

which solves my issue perfectly.