本文翻译自:How to set bootstrap navbar active class with Angular JS?
If I have a navbar in bootstrap with the items 如果我在引导程序中有一个带有项目的导航栏
Home | About | Contact
How do I set the active class for each menu item when they are active? 如何为每个菜单项激活时设置活动类? That is, how can I set class="active"
when the angular route is at 也就是说,当角度路径class="active"
时,我如何设置class="active"
#/
for home #/
为家 #/about
for the about page #/about
about about page #/contact
for the contact page #/contact
联系页面 参考:https://stackoom.com/question/15yCw/如何使用Angular-JS设置bootstrap-navbar活动类
First and foremost, this problem can be solved in a lot of ways. 首先,这个问题可以通过很多方式解决。 This way might not be the most elegant, but it cerntainly works. 这种方式可能不是最优雅的,但它确实有效。
Here is a simple solution you should be able to add to any project. 这是一个简单的解决方案,您应该可以添加到任何项目。 You can just add a "pageKey" or some other property when you configure your route that you can use to key off of. 您可以在配置可用于关闭的路由时添加“pageKey”或其他属性。 Additionally, you can implement a listener on the $routeChangeSuccess method of the $route object to listen for the successful completion of a route change. 此外,您可以在$ route对象的$ routeChangeSuccess方法上实现一个侦听器,以侦听路由更改的成功完成。
When your handler fires you get the page key, and use that key to locate elements that need to be "ACTIVE" for this page, and you apply the ACTIVE class. 当您的处理程序触发时,您获取页面键,并使用该键来查找此页面需要“ACTIVE”的元素,并应用ACTIVE类。
Keep in mind you need a way to make ALL the elements "IN ACTIVE". 请记住,您需要一种方法使所有元素“处于活动状态”。 As you can see i'm using the .pageKey class on my nav items to turn them all off, and I'm using the .pageKey_{PAGEKEY} to individually turn them on. 正如你所看到我在我的导航项目上使用.pageKey类将它们全部关闭,我正在使用.pageKey_ {PAGEKEY}来单独打开它们。 Switching them all to inactive, would be considered a naive approach, potentially you'd get better performance by using the previous route to make only active items inactive, or you could alter the jquery selector to only select active items to be made inactive. 将它们全部切换为非活动状态将被视为一种天真的方法,可能通过使用先前的路由仅使活动项处于非活动状态来获得更好的性能,或者您可以将jquery选择器更改为仅选择要使其处于非活动状态的活动项。 Using jquery to select all active items is probably the best solution because it ensures everything is cleaned up for the current route in case of any css bugs that might have been present on the previous route. 使用jquery选择所有活动项可能是最好的解决方案,因为它可以确保在前一个路径上可能存在任何css错误的情况下清除当前路由的所有内容。
Which would mean changing this line of code: 这意味着改变这行代码:
$(".pagekey").toggleClass("active", false);
to this one 对这一个
$(".active").toggleClass("active", false);
Here is some sample code: 以下是一些示例代码:
Given a bootstrap navbar of 给出一个bootstrap导航栏
And an angular module and controller like the following: 和角度模块和控制器如下:
You can have a look at AngularStrap , the navbar directive seems to be what you are looking for: 您可以查看AngularStrap ,navbar指令似乎是您正在寻找的:
https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js 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');
}
});
});
}
};
});
To use this directive: 要使用此指令:
Download AngularStrap from http://mgcrea.github.io/angular-strap/ 从http://mgcrea.github.io/angular-strap/下载AngularStrap
Include the script on your page after bootstrap.js: 在bootstrap.js之后在您的页面上包含脚本:
Add the directives to your module: 将指令添加到您的模块: angular.module('myApp', ['$strap.directives'])
Add the directive to your navbar: 将指令添加到导航栏: