Q1: I tried to use nav in bootstrap to make a navigation bar and bound ng-click to the anchors. However after I click
the anchor link,there is nothing happened.
Q2: I've noticed that the anchor link
clicked won't be active by setting bg-color
to it? How can this be implemented?
Here is the JSfiddle ...
<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>
The brackets for function invocation are missing. You should have:
ng-click="handleClick()"
Answering Q2:
Maybe there are smarter solutions, but this one works as well:
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>
I have Updated your code. Add ng-app
directive
to your body
tag. And In your html change ng-click="handleClick"
to 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>
and our JS
code is
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');
};
}]);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.