如果我有一个导航栏在引导项目
Home | About | Contact
当每个菜单项处于活动状态时,如何为它们设置活动类?也就是说,当角路由为at时,我如何设置class="active"
#/ home #/about用于about页面 #/contact为联系人页面
如果我有一个导航栏在引导项目
Home | About | Contact
当每个菜单项处于活动状态时,如何为它们设置活动类?也就是说,当角路由为at时,我如何设置class="active"
#/ home #/about用于about页面 #/contact为联系人页面
当前回答
感谢@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;}
希望这将有助于有人寻求实现单级下拉菜单。
其他回答
你可以在角表达式中使用条件来实现这一点,例如:
<a href="#" class="{{ condition ? 'active' : '' }}">link</a>
话虽如此,我确实发现angular指令是更“合适”的方式,即使外包大量这种微型逻辑会在一定程度上污染你的代码库。
在开发过程中,我每隔一段时间就会使用条件来进行GUI样式化,因为这比创建指令要快一些。但我无法告诉你一个实例,它们实际上在代码库中保留了很长时间。最后,我要么把它变成一个指令,要么找到一个更好的方法来解决问题。
这对我来说很管用:
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是'应用程序',它将是活跃的
这是一个很长的回答,但我想分享我的方法:
.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"
我刚刚写了一个指令来处理这个问题,所以你可以简单地将属性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');
};
});
});
}
}
}]);
这里有另一个解决方案,谁可能感兴趣。这样做的好处是它的依赖关系更少。见鬼,它也可以在没有网络服务器的情况下工作。所以这完全是客户端的。
HTML:
<nav class="navbar navbar-inverse" ng-controller="topNavBarCtrl"">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a>
</div>
<ul class="nav navbar-nav">
<li ng-click="selectTab()" ng-class="getTabClass()"><a href="#">Home</a></li>
<li ng-repeat="tab in tabs" ng-click="selectTab(tab)" ng-class="getTabClass(tab)"><a href="#">{{ tab }}</a></li>
</ul>
</div>
解释:
这里我们使用ng-repeat指令从angularjs模型动态生成链接。在控制器中为下面的导航栏定义的selectTab()和getTabClass()方法发生了魔术。
控制器:
angular.module("app.NavigationControllersModule", [])
// Constant named 'activeTab' holding the value 'active'. We will use this to set the class name of the <li> element that is selected.
.constant("activeTab", "active")
.controller("topNavBarCtrl", function($scope, activeTab){
// Model used for the ng-repeat directive in the template.
$scope.tabs = ["Page 1", "Page 2", "Page 3"];
var selectedTab = null;
// Sets the selectedTab.
$scope.selectTab = function(newTab){
selectedTab = newTab;
};
// Sets class of the selectedTab to 'active'.
$scope.getTabClass = function(tab){
return selectedTab == tab ? activeTab : "";
};
});
解释:
使用ng-click指令调用selectTab()方法。因此,当单击链接时,变量selectedTab被设置为该链接的名称。在HTML中,您可以看到这个方法在没有任何Home选项卡参数的情况下被调用,以便在页面加载时突出显示它。
getTabClass()方法是通过HTML中的ng-class指令调用的。这个方法检查它所在的选项卡是否与selectedTab变量的值相同。如果为真,则返回"active",否则返回"",它被ng-class指令应用为类名。然后,你应用到active类的css将被应用到所选的选项卡。