Angular JS:IE错误:达到10 $ digest()迭代.中止

Question

我是Angular的新手,我遇到了与IE有关的问题.

这是我得到的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

除了IE 8和IE 9之外,任何其他浏览器都不会发生这种情况.

我有一个手表正在查看包含位置过滤器的内容过滤对象.

我的问题是为什么它不会发生在IE以外的任何其他浏览器上,我应该怎么做才能摆脱这个问题.提前致谢.

Answer 1

TiagoRoldão绝对是对的.我有同样的问题.调试后,我在我的代码中实现了

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

这会导致无限循环问题.经过一番研究,我发现了这个

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

这完全解决了我的问题.

Answer 2

我有同样的错误问题看起来一样.Chrome\FF工作正常,但IE失败了.我点击了我的应用程序中的一些链接,有时会出现此错误,有时不会.

1)在我看来,我的链接看起来像这样:

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

2)单击处理程序,将这些链接添加到IpRanges集合中的新对象,如下所示:

$scope.IpRanges.push(ip);

3)集合本身在ng-repeat上查看绑定,我认为IE无法以某种方式处理好这种情况 - 可能是绑定\添加\应用事件的顺序不正确或者...也是点击链接后我将#符号添加到网址,有时它会眨眼,然后我就出错了.所以我删除了href属性,一切正常:

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

对于类似的情况,可能最好使用跨度或div.

Answer 3

在调用$ window.history.back()时,我在IE9,IE10中使用AngularJS v1.2.13时遇到了同样的问题(特别是在Windows Phone中).

似乎根本原因是IE中的$ window.history.back()在$ locationWatch()被触发之前改变了href,因此oldUrl将包含新的Url并且将角度抛出到无限$ digest中.

当前的解决方法是使用以下内容替换对$ window.history.back()的调用:

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

Answer 4

我可以从你的错误报告中看出你有一个$ watch for changeCounter变量,以及这个观察者函数:

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;
};

如果$ browser.url()不等于$ location.absUrl(),则changeCounter会使其值增加.由于$ watch函数只能进行10次更改/反应循环,因此在这10次迭代之后会出错.当你改变你正在观看的价值时,它最终会破裂.

我会记录这些值 - $ location.absUrl()和$ browser.url(),看看为什么匹配在其他浏览器中,但不是在ie.