如果我有一个导航栏在引导项目
Home | About | Contact
当每个菜单项处于活动状态时,如何为它们设置活动类?也就是说,当角路由为at时,我如何设置class="active"
#/ home #/about用于about页面 #/contact为联系人页面
如果我有一个导航栏在引导项目
Home | About | Contact
当每个菜单项处于活动状态时,如何为它们设置活动类?也就是说,当角路由为at时,我如何设置class="active"
#/ home #/about用于about页面 #/contact为联系人页面
当前回答
我觉得这些答案对我来说有点太复杂了,抱歉。所以我创建了一个小指令,应该在每个导航条的基础上工作:
app.directive('activeLink', function () {
return {
link: function (scope, element, attrs) {
element.find('.nav a').on('click', function () {
angular.element(this)
.parent().siblings('.active')
.removeClass('active');
angular.element(this)
.parent()
.addClass('active');
});
}
};
});
用法:
<ul class="nav navbar-nav navbar-right" active-link>
<li class="nav active"><a href="home">Home</a></li>
<li class="nav"><a href="foo">Foo</a></li>
<li class="nav"><a href="bar">Bar</a></li>
</ul>
其他回答
这对我来说很管用:
var domain = '{{ DOMAIN }}'; // www.example.com or dev.example.com
var domain_index = window.location.href.indexOf(domain);
var long_app_name = window.location.href.slice(domain_index+domain.length+1);
// this turns http://www.example.com/whatever/whatever to whatever/whatever
app_name = long_app_name.slice(0, long_app_name.indexOf('/'));
//now you are left off with just the first whatever which is usually your app name
然后使用jquery(也适用于angular)添加类active
$('nav a[href*="' + app_name+'"]').closest('li').addClass('active');
当然还有css:
.active{background:red;}
如果你有这样的HTML,这是有效的:
<ul><li><a href="/ee">ee</a></li><li><a href="/dd">dd</a></li></ul>
这将自动添加类活跃使用页面url和颜色你的背景为红色,如果你在www.somesite.com/ee thaen ee是'应用程序',它将是活跃的
你可以看看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');
}
});
});
}
};
});
使用这个指令:
从http://mgcrea.github.io/angular-strap/下载AngularStrap 包括脚本在你的页面bootstrap.js之后: < script src = " lib / angular-strap.js " > < /脚本> 添加指令到你的模块: 角。模块(“myApp”,[' strap.directives美元']) 添加指令到你的导航栏: <div class="navbar" b -navbar> 在每个导航项上添加正则表达式: <李data-match-route = " / " > < a href = " # /约" >对< / > < /李>
一个非常优雅的方法是使用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();
};
}
使用对象作为切换变量。 你可以很简单地用以下方法做到这一点:
<ul class="nav navbar-nav">
<li ng-class="{'active':switch.linkOne}" ng-click="switch = {linkOne: true}"><a href="/">Link One</a></li>
<li ng-class="{'active':switch.linkTwo}" ng-click="switch = {link-two: true}"><a href="/link-two">Link Two</a></li>
</ul>
每次单击链接,switch对象都会被一个新对象替换,其中只有正确的switch对象属性为true。未定义的属性将被赋值为false,因此依赖于它们的元素将不会被赋值为活动类。
这是一个很长的回答,但我想分享我的方法:
.run(function($rootScope, $state){
$rootScope.$state = $state;
});
模板:
<ul class="nav navbar-nav">
<li ng-class="{ active: $state.contains('View1') }"><a href="...">View 1</a></li>
<li ng-class="{ active: $state.contains('View2') }"><a href="...">View 2</a></li>
<li ng-class="{ active: $state.contains('View3') }"><a href="...">View 3</a></li>
</ul>
对于使用ui-router的用户:
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a href="...">View 1</a></li>
<li ui-sref-active="active"><a href="...">View 2</a></li>
<li ui-sref-active="active"><a href="...">View 3</a></li>
</ul>
对于精确匹配(例如嵌套状态?)使用$state.name === 'full/path/to/state'或ui-sref-active-eq="active"