1

我正在尝试使用带有 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 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 }; 新值：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 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 }; 新值：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 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 }; 新值：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 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 }; 新值：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 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 }; 新值：12；旧值：11"]]

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

编辑

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

4

1 回答 1

0

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

myApp.controller('ctrl', function ($scope) {
   // ...
});
于 2013-11-12T17:47:25.873 回答