如果我有一个导航栏在引导项目
Home | About | Contact
当每个菜单项处于活动状态时,如何为它们设置活动类?也就是说,当角路由为at时,我如何设置class="active"
#/ home #/about用于about页面 #/contact为联系人页面
如果我有一个导航栏在引导项目
Home | About | Contact
当每个菜单项处于活动状态时,如何为它们设置活动类?也就是说,当角路由为at时,我如何设置class="active"
#/ home #/about用于about页面 #/contact为联系人页面
当前回答
我刚刚写了一个指令来处理这个问题,所以你可以简单地将属性bs-active-link添加到父元素<ul>,任何时候路由发生变化,它都会找到匹配的链接,并将活动类添加到相应的<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');
};
});
});
}
}
}]);
其他回答
我使用ng-class指令和$location来实现它。
<ul class="nav">
<li data-ng-class="{active: ($location.path() == '/') }">
<a href="#/">Carpeta Amarilla</a>
</li>
<li class="dropdown" data-ng-class="{active: ($location.path() == '/auditoria' || $location.path() == '/auditoria/todos') }">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Auditoria
<b class="caret"></b>
</a>
<ul class="dropdown-menu pull-right">
<li data-ng-class="{active: ($location.path() == '/auditoria') }">
<a href="#/auditoria">Por Legajo</a>
</li>
<li data-ng-class="{active: ($location.path() == '/auditoria/todos') }">
<a href="#/auditoria/todos">General</a>
</li>
</ul>
</li>
</ul>
它要求导航条在一个主控制器中,可以像这样访问$location服务:
bajasApp.controller('MenuCntl', ['$scope','$route', '$routeParams', '$location',
function MenuCntl($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
}]);
扩展我的答案,我需要这个来处理这样的结构。
指数
事件<活跃 ——事件列表 ——event-edit ——事件映射<点击
——这 ——place-list ——place-edit ——place-map
所以不是匹配,我必须使用indexOf,以验证子链接的格式匹配条件。对于'events':
<li ng-class="{ active: isActive('/event')}" class="divider-vertical dropdown">
function NavController($scope, $location) {
$scope.isActive = function (viewLocation) {
var s=false;
if($location.path().indexOf(viewLocation) != -1){
s = true;
}
return s;
};}
这是一个很长的回答,但我想分享我的方法:
.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"
感谢@Pylinux。我使用了他的技术,并对其进行了修改,以支持“一级”下拉菜单(sub ul/li),因为这是我所需要的。在下面的小提琴链接中看到它的实际操作。
根据pylinux的答案- http://jsfiddle.net/abhatia/en4qxw6g/更新了Fiddle
为了支持一级下拉菜单,我做了以下三个修改: 1. 为li下的“a”元素添加了一个类值dd(下拉),该元素需要有子ul列表。
<li><a class="dd">This link points to #/fun5</a>
<ul>
<li><a href="#/fun6?some=data">This link points to #/fun6</a>
</li>
<li><a href="#/fun7?some=data">This link points to #/fun7</a>
</li>
<li><a href="#/fun8?some=data">This link points to #/fun8</a>
</li>
<li><a href="#/fun9?some=data">This link points to #/fun9</a>
</li>
</ul>
</li>
2. 更新Javascript以添加以下新逻辑。
if(angular.element(li).parent().parent().children('a').hasClass("dd"))
{angular.element(li).parent().parent().children('a.dd').addClass('active');}
3.更新后的CSS添加如下内容:
a.active {background-color:red;}
希望这将有助于有人寻求实现单级下拉菜单。
这是一个简单的解决方案
<ul class="nav navbar-nav navbar-right navbar-default menu">
<li ng-class="menuIndice == 1 ? 'active':''">
<a ng-click="menuIndice = 1" href="#/item1">item1</a>
</li>
<li ng-class="menuIndice == 2 ? 'active':''">
<a ng-click="menuIndice = 2" href="#/item2">item2</a>
</li>
<li ng-class="menuIndice == 3 ? 'active':''">
<a ng-click="menuIndice = 3" href="#/item3">item3</a>
</li>
</ul>