Angularjs JavaScript 运行时错误：达到 10 次 $digest() 迭代。中止

Question

我正在尝试使用带有 angularjs 的 bootstrap 2.3.x 为我的网页创建一个菜单栏，如下所示。

<div class="container" >
    <div class="navbar">
        <div class="nav-collapse collapse" >
            <ul class="nav pull-right">
                <li ng-repeat="menu in headerMenus" class={{menu.active}}>
                    <a href="#" ng-click="MenuClicked(menu)">{{menu.name}}</a>
                </li>
            </ul>
        </div>
    </div>
</div>

我的控制器定义如下

var myApp = angular.module('myApp', [ ]);

myApp.controller('ctrl', function ctrl($scope) {

  $scope.headerMenus = [
    { 'name': 'Home ',
        'link': 'index.html'
    },
    { 'name': 'Our Services',
        'link': 'services.html',
        'active': 'active'
    },
    { 'name': 'About Us',
        'link': 'about_us.html'
    },
    { 'name': 'Portfolio',
        'link': 'portfolio.html'
    },
    { 'name': 'Support',
        'link': 'contact.html'
    }
  ];

  $scope.MenuClicked = function(menu){
    alert('Clicked:' + menu.link);    
  }
});

现在在我点击菜单几次后，angular 会抛出以下错误：

JavaScript 运行时错误：达到 10 次 $digest() 迭代。中止！ 在最后 5 次迭代中触发的观察者：[["fn: function $locationWatch() {\n var oldUrl = $browser.url();\n var currentReplace = $location.$$replace;\n\n if (!changeCounter || oldUrl != $location.absUrl()) {\n changeCounter++;\n
$rootScope.$evalAsync(function() {\n 如果 ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl)。\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } 其他 {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; 新值：8； oldVal: 7"],["fn: 函数 $locationWatch() {\n var oldUrl = $browser.url();\n var currentReplace = $location.$$replace;\n\n if (!changeCounter || oldUrl != $location.absUrl()) {\n changeCounter++;\n
$rootScope.$evalAsync(function() {\n 如果 ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl)。\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } 其他 {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; 新值：9； oldVal: 8"],["fn: 函数 $locationWatch() {\n var oldUrl = $browser.url();\n var currentReplace = $location.$$replace;\n\n if (!changeCounter || oldUrl != $location.absUrl()) {\n changeCounter++;\n
$rootScope.$evalAsync(function() {\n 如果 ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl)。\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } 其他 {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; 新值：10； oldVal: 9"],["fn: 函数 $locationWatch() {\n var oldUrl = $browser.url();\n var currentReplace = $location.$$replace;\n\n if (!changeCounter || oldUrl != $location.absUrl()) {\n changeCounter++;\n
$rootScope.$evalAsync(function() {\n 如果 ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl)。\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } 其他 {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; 新值：11； oldVal: 10"],["fn: 函数 $locationWatch() {\n var oldUrl = $browser.url();\n var currentReplace = $location.$$replace;\n\n if (!changeCounter || oldUrl != $location.absUrl()) {\n changeCounter++;\n
$rootScope.$evalAsync(function() {\n 如果 ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl)。\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } 其他 {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; 新值：12； oldVal: 11"]]

如果我在菜单上注释掉ng-click，我没有问题。有人可以帮我弄清楚我在这里做错了什么吗？

编辑

当我注释掉 href="#" 或 ng-click 时，这个问题就消失了，但两者一起，它就失败了。

Answer 1

您的控制器定义看起来有点不对劲。试试这个：

myApp.controller('ctrl', function ($scope) {
   // ...
});