Abilash Abilash - 3 months ago 19
AngularJS Question

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

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() {\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


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

I had the same issue with error which looked the same. Chrome\FF worked fine, but IE failed. I've clicked on some links in my app and sometimes got this error and sometimes not.

1) In my view I had few links which looked like this:

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

2) Click handler for those links added new object into IpRanges collection like this:

$scope.IpRanges.push(ip);

3) Collection itself was binded on view by ng-repeat, and I thought that somehow IE could not handle this situation well - probably order of binding\adding\applying events wasn't incorrect or else... Also after click on links I had # symbol added to url, and sometimes it blinked, and then I've got an error. So I removed href attribute and everything worked fine:

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

Probably it's better to use spans or divs for similar situations.