Ошибка времени выполнения JavaScript в Angularjs: Достигнуты истребители 10 $ digest(). Aborting

Question

Я пытаюсь использовать bootstrap 2.3.x с angularjs, чтобы создать панель меню для моей веб-страницы, как показано ниже.

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

теперь после того, как я нажимаю на меню несколько раз, угловатый бросает следующее сообщение об ошибке:

JavaScript runtime error: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["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 if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } else {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; newVal: 8; oldVal: 7"],["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 if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } else {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; newVal: 9; oldVal: 8"],["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 if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } else {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; newVal: 10; oldVal: 9"],["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 if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } else {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; newVal: 11; oldVal: 10"],["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 if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } else {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; newVal: 12; oldVal: 11"]]

если я закомментируйте ng-click в меню У меня нет проблем. Может кто-нибудь помочь мне выяснить, что я делаю неправильно здесь?

EDIT

Эта проблема уходит, когда я закомментируйте href="#" или ng-click, но оба вместе, он терпит неудачу.

Answer 1

Ваше определение контроллера немного не работает. Попробуйте использовать это:

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