1

以下に示すように、angularjs でブートストラップ 2.3.x を使用して、Web ページのメニュー バーを作成しようとしています。

<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 ランタイム エラー: 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: 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メニューでコメントアウトしても問題ありません。誰かが私がここで間違っていることを理解するのを手伝ってくれますか?

編集

href="#"この問題は、またはをコメントアウトすると解消されng-clickますが、両方を一緒にすると失敗します。

4

1 に答える 1

0

コントローラーの定義が少しずれています。これを使用してみてください：

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