如果我有一个导航栏在引导项目
Home | About | Contact
当每个菜单项处于活动状态时,如何为它们设置活动类?也就是说,当角路由为at时,我如何设置class="active"
#/ home #/about用于about页面 #/contact为联系人页面
如果我有一个导航栏在引导项目
Home | About | Contact
当每个菜单项处于活动状态时,如何为它们设置活动类?也就是说,当角路由为at时,我如何设置class="active"
#/ home #/about用于about页面 #/contact为联系人页面
当前回答
你可以在角表达式中使用条件来实现这一点,例如:
<a href="#" class="{{ condition ? 'active' : '' }}">link</a>
话虽如此,我确实发现angular指令是更“合适”的方式,即使外包大量这种微型逻辑会在一定程度上污染你的代码库。
在开发过程中,我每隔一段时间就会使用条件来进行GUI样式化,因为这比创建指令要快一些。但我无法告诉你一个实例,它们实际上在代码库中保留了很长时间。最后,我要么把它变成一个指令,要么找到一个更好的方法来解决问题。
其他回答
使用对象作为切换变量。 你可以很简单地用以下方法做到这一点:
<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,因此依赖于它们的元素将不会被赋值为活动类。
你可以在角表达式中使用条件来实现这一点,例如:
<a href="#" class="{{ condition ? 'active' : '' }}">link</a>
话虽如此,我确实发现angular指令是更“合适”的方式,即使外包大量这种微型逻辑会在一定程度上污染你的代码库。
在开发过程中,我每隔一段时间就会使用条件来进行GUI样式化,因为这比创建指令要快一些。但我无法告诉你一个实例,它们实际上在代码库中保留了很长时间。最后,我要么把它变成一个指令,要么找到一个更好的方法来解决问题。
以下是我的看法。在这篇文章中找到了一些答案的组合。我有一个稍微不同的情况下,所以我的解决方案涉及到分离菜单到自己的模板,在指令定义Ojbect中使用,然后添加我的导航栏到我需要它的页面。基本上,我有一个登录页面,我不想包括我的菜单,所以我使用ngInclude并在登录时插入这个指令:
指令:
module.directive('compModal', function(){
return {
restrict: 'E',
replace: true,
transclude: true,
scope: true,
templateUrl: 'templates/menu.html',
controller: function($scope, $element, $location){
$scope.isActive = function(viewLocation){
var active = false;
if(viewLocation === $location.path()){
active = true;
}
return active;
}
}
}
});
指令模板(templates/menu.html)
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/View1') }"><a href="#/View1">View 1</a></li>
<li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
<li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>
包含指令的HTML
<comp-navbar/>
希望这能有所帮助
这是一个很长的回答,但我想分享我的方法:
.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"
扩展我的答案,我需要这个来处理这样的结构。
指数
事件<活跃 ——事件列表 ——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;
};}