如何用Angular JS设置bootstrap navbar活动类？
如何用Angular JS设置bootstrap navbar活动类？
提问于 2013-04-25 02:22:10
如果我在bootstrap中有一个导航栏，其中包含以下项目
Home | About | Contact当每个菜单项处于活动状态时，如何为其设置活动类？也就是说，当角度路径位于时，如何设置class="active"
用于home
#/about的
#/，用于联系页面
的关于page
#/contact
回答 26
Stack Overflow用户
回答已采纳
发布于 2013-09-02 03:59:38
一种非常优雅的方式是使用ng-controller在ng-view之外运行单个控制器：
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li>
<li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li>
<li ng-class="{ active: isActive('/cats')}"><a href="/cats">Cats</a></li>
</ul>
</div>
<div ng-view></div>并包含在controllers.js中：
function HeaderController($scope, $location)
{
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}Stack Overflow用户
发布于 2014-04-04 14:08:16
我刚刚编写了一个指令来处理这个问题，所以您可以简单地将属性bs-active-link添加到父<ul>元素中，只要路由发生更改，它就会找到匹配的链接，并将active类添加到相应的<li>中。
你可以在这里看到它的实际效果：http://jsfiddle.net/8mcedv3b/
示例HTML：
<ul class="nav navbar-nav" bs-active-link>
<li><a href="/home">Home</a></li>
<li><a href="/contact">Contact</a></li>
</ul>Javascript：
angular.module('appName')
.directive('bsActiveLink', ['$location', function ($location) {
return {
restrict: 'A', //use as attribute
replace: false,
link: function (scope, elem) {
//after the route has changed
scope.$on("$routeChangeSuccess", function () {
var hrefs = ['/#' + $location.path(),
'#' + $location.path(), //html5: false
$location.path()]; //html5: true
angular.forEach(elem.find('a'), function (a) {
a = angular.element(a);
if (-1 !== hrefs.indexOf(a.attr('href'))) {
a.parent().addClass('active');
} else {
a.parent().removeClass('active');
};
});
});
}
}
}]);Stack Overflow用户
发布于 2013-04-26 16:24:17
你可以看看AngularStrap，导航栏指令似乎就是你要找的：
https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js
.directive('bsNavbar', function($location) {
'use strict';
return {
restrict: 'A',
link: function postLink(scope, element, attrs, controller) {
// Watch for the $location
scope.$watch(function() {
return $location.path();
}, function(newValue, oldValue) {
$('li[data-match-route]', element).each(function(k, li) {
var $li = angular.element(li),
// data('match-rout') does not work with dynamic attributes
pattern = $li.attr('data-match-route'),
regexp = new RegExp('^' + pattern + '$', ['i']);
if(regexp.test(newValue)) {
$li.addClass('active');
} else {
$li.removeClass('active');
}
});
});
}
};
});要使用此指令：
- Download AngularStrap from http://mgcrea.github.io/angular-strap/
- 在bootstrap.js之后将脚本包含在您的页面上：
<script src="lib/angular-strap.js"></script>
- 将指令添加到模块中：
angular.module('myApp', ['$strap.directives'])
- 将该指令添加到导航栏：
<div class="navbar" bs-navbar>
- 在每个nav项目上添加正则表达式：
<li data-match-route="/about"><a href="#/about">About</a></li>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16199418
复制相关文章
相似问题