当任何子视图处于活动状态时,AngularJs navbar父视图应该处于活动状态
问题描述:
我想要实现的第一个视图是基于一些子视图并且主视图是抽象的 - 仅重定向到第一个子视图。我实现了两个导航栏。一个用于导航普通视图,另一个仅导航到主子视图。我想知道当主子视图中的一个主动子视图处于活动状态时,如何将主导航栏设置为在家中活动。当任何子视图处于活动状态时,AngularJs navbar父视图应该处于活动状态
下面的代码顶部酒吧navbar。主页的任何子视图处于活动状态时,主页按钮应处于活动状态(home.a,home.b)。目前Home从未活跃。
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="home">Home</a></li> //here i can use home.a but when i will navigate to home.b it ll be inactive
<li ui-sref-active="active"><a ui-sref="about">About</a></li>
<li ui-sref-active="active"><a ui-sref="contact">Contact</a></li>
</ul>
子视图导航栏工作正确每当我对某个子的观点正确的按钮激活
<ul class="nav nav-pills nav-stacked">
<li ui-sref-active="active"><a ui-sref="home.a">Wspolne</a></li>
<li ui-sref-active="active"><a ui-sref="home.b">Moje</a></li>
</ul>
这条路线是收盘soution主导航栏子vievs主动当选择,但是当我将改变主视图联系然后我不能回家原因它是抽象的视图:
.state('home', {
abstract: true,
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'ctrl'
})
.state('home.a', {
url: '/',
templateUrl: 'app/main/a/a.html',
controller: 'AController',
controllerAs: 'ctrl'
})
.state('home.b', {
url: '/',
templateUrl: 'app/main/b/b.html',
controller: 'BController',
controllerAs: 'ctrl'
})
.state('contact', {
url: '/contact',
templateUrl: 'app/contact/contact.html',
controller: 'ContactController',
controllerAs: 'ctrl'
})
答
的解决方案是改变活性条件指状态对象,并且改变与UI SREF到子p的HREF ath:
<li ng-class="{active: ctrl.$state.includes('home')}"><a href="/">Home</a></li>
这是工作而不是优雅。有更好的解决方案
答
喜也许要晚,但试试这个;)
<div ui-sref-active="{'active': 'admin.**'}">
<a ui-sref-active="active" ui-sref="admin.roles">Roles</a>
</div>