问题1:我试图在Bootstrap中使用
问题1:我试图在Bootstrap中使用
ng-click="handleClick()"
回答问题2:
也许有更聪明的解决方案,但这个也能够工作:
angular.module('myApp').controller('MenuCtrl', ['$scope', '$location', '$rootScope',
function ($scope, $location, $rootScope) {
$rootScope.$on('$locationChangeSuccess', function () {
var path = $location.path();
// you may apply logic on the path (group together in case of dropdown-menu e.g.)
$scope.topMenu = path;
});
}
]);
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"
ng-controller="MenuCtrl">
<div class="container-fluid">
<div class="navbar-header">
<!-- ... -->
</div>
<div class="navbar-collapse collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{active: topMenu == '/'}">
<a href="#">Home</a></li>
<li ng-class="{active: topMenu == '/about'}">
<a href="#about">About</a></li>
<!-- more... -->
</ul>
</div>
</div>
</div>
$routeProvider
路由器处理,在大多数情况下,您不必放置ng-click
处理程序-它是通过更改路由(#哈希)完成的。 - hgoebl我已经更新了你的代码。在你的body
标签中添加ng-app
directive
。并且在你的HTML中将ng-click="handleClick"
更改为ng-click="handleClick()"
。
<body ng-app="app"><div ng-controller="SuiteSectionCtrl">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">All Suites</a>
</li>
<li><a ng-click="handleClick()">Suite1</a>
</li>
<li><a href="#">Suite2</a>
</li>
<li><a href="#">Suite3</a>
</li>
</ul>
</div></body>
而我们的JS
代码是
var executionAPP = angular.module('app',[])//register your app
executionAPP.controller('SuiteSectionCtrl',['$scope',function($scope){
$scope.oneAtATime = true;
$scope.testSuites = [{title:"TestSuite1",content:"TestContent1"},
{title:"TestSuite2",content:"TestContent2"},
{title:"TestSuite3",content:"TestContent3"},
{title:"TestSuite4",content:"TestContent4"},
{title:"TestSuite5",content:"TestContent5"}];
$scope.handleClick = function(){
alert('Accordion clicked');
};
}]);