Javascript Angular JS：IE 错误：已达到 10 次 $digest() 迭代。中止
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13853844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS: IE Error: 10 $digest() iterations reached. Aborting
提问by Abilash
I'm new to Angular and I'm stuck with a issue relating IE.
我是 Angular 的新手，我遇到了一个与 IE 相关的问题。
Here is the IE Error that I'm getting.
这是我得到的 IE 错误。
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.
除了 IE 8 和 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.
我的问题是为什么它不会发生在除 IE 之外的任何其他浏览器上，我应该怎么做才能摆脱这种情况。提前致谢。
采纳答案by Schnapz
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.
我有同样的错误问题，看起来一样。Chrome\FF 工作正常，但 IE 失败。我点击了我的应用程序中的一些链接，有时会出现此错误，有时不会。
1) In my view I had few links which looked like this:
1）在我看来，我有几个链接看起来像这样：
<a href="#" ng-click="addIP(ip)">Add some IP</a>
2) Click handler for those links added new object into IpRanges collection like this:
2）单击处理程序为这些链接添加新对象到 IpRanges 集合中，如下所示：
$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:
3）集合本身被ng-repeat绑定在视图上，我认为IE无法很好地处理这种情况 - 可能绑定\添加\应用事件的顺序不正确，否则......点击链接后我将 # 符号添加到 url，有时它会闪烁，然后出现错误。所以我删除了 href 属性，一切正常：
<a href="" ng-click="addCurrentIP()">Add as allowed IP</a>
Probably it's better to use spans or divs for similar situations.
对于类似的情况，最好使用跨度或 div。
回答by geniuscarrier
Tiago Rold?o is definitely right. I had exact the same issue. After debug, I realized in my code I have
Tiago Rold?o 绝对是对的。我有完全相同的问题。调试后，我在我的代码中意识到我有
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.
这完美地解决了我的问题。
回答by Aidin
I had the same issue using AngularJS v1.2.13 in IE9, IE10, when calling $window.history.back() (especially in Windows Phone).
我在 IE9、IE10 中使用 AngularJS v1.2.13 时，在调用 $window.history.back() 时遇到了同样的问题（尤其是在 Windows Phone 中）。
It seems the root cause is that $window.history.back() in IE changes the href right before the $locationWatch() is fired hence oldUrl would contain the new Url and that throws off the angular into an infinite $digest.
似乎根本原因是 IE 中的 $window.history.back() 在 $locationWatch() 被触发之前更改了 href ，因此 oldUrl 将包含新的 Url 并将角度抛出到无限的 $digest 中。
The immediate work around is to replace the calls to $window.history.back() with the following:
直接的解决方法是用以下内容替换对 $window.history.back() 的调用：
setTimeout(function ()
{
$window.history.back();
}, 0);
回答by Tiago Rold?o
I can tell from your error report you have a $watch for a changeCounter variable, and this watcher function:
我可以从你的错误报告中看出你有一个用于 changeCounter 变量的 $watch，以及这个观察器函数：
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;
};
And the changeCounter gets it's value incremented if $browser.url() doesn't equal $location.absUrl(). As the $watch function can only do 10 loops of change/reaction, it will err after those 10 iterations. As you are changing the value you are watching, it eventually breaks.
如果 $browser.url() 不等于 $location.absUrl()，则 changeCounter 的值会增加。由于 $watch 函数只能执行 10 次更改/反应循环，因此在这 10 次迭代后会出错。当你改变你正在观察的值时，它最终会崩溃。
I would log those values - $location.absUrl() and $browser.url(), and see why the match in other browsers, but not in ie.
我会记录这些值 - $location.absUrl() 和 $browser.url()，看看为什么在其他浏览器中匹配，但在 ie 中不匹配。
回答by mulla.azzi
I was facing issue in IE 10. I was using
我在 IE 10 中遇到了问题。我正在使用
window.location.href = '#/';
for changing the route. Replacing it with below code
用于更改路线。用下面的代码替换它
$location.path('/');
resolved the issue
解决了问题
回答by Scotty.NET
TLDR
TLDR
If you are using ui-routerthen you can also use
如果您正在使用，ui-router那么您也可以使用
$state.go('details', {id:item.ID});
Background
背景
I was using the following function to navigate from a list view to a details view so that you can click anything with ng-click="details(item)", in my case tr's in the list:
我使用以下函数从列表视图导航到详细信息视图，以便您可以单击任何带有 的ng-click="details(item)"，在我的情况下tr是在列表中：
$scope.details = function (item) {
$window.location.href = "#/details/" + item.ID;
}
But I was getting the dreaded 10 $digest() iterations reachedin IE.
但我10 $digest() iterations reached在 IE 中感到害怕。
FYI
供参考
I placed a breakpoint in AngularJS v1.2.0rc1 angular.js line 7650 following Tiago's answer.
在 Tiago 的回答之后，我在 AngularJS v1.2.0rc1 angular.js line 7650 中放置了一个断点。
// 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;
});
Results
结果
Output from Chrome
Chrome 的输出
- The breakpoint was only hit once the details page was loading and once only.
oldUrl(i.e.$browser.url()was reporting the old url (i.e. the list one)$location.absUrl()was reporting the details url.
- 断点仅在加载详细信息页面时被击中，并且仅一次。
oldUrl（即$browser.url()报告旧网址（即列表之一）$location.absUrl()正在报告详细信息网址。
Output from IE7,8
来自 IE7,8 的输出
- The breakpoint was hit continuously.
oldUrl(i.e.$browser.url()was reporting the new url (i.e. the details one)$location.absUrl()was still reporting the list url.
- 断点被连续击中。
oldUrl（即$browser.url()正在报告新网址（即详细信息一）$location.absUrl()仍在报告列表网址。
回答by Christopher Freyburg
I had this problem when trying to redirect to other page as
我在尝试重定向到其他页面时遇到了这个问题
$window.location.href = '#/path/'
solved by changing to:
通过更改为：
$location.path('/path/');
