当任何子视图处于活动状态时，AngularJs 导航栏父视图应该处于活动状态答案

【问题标题】：AngularJs navbar parent view should be active when any child view are active当任何子视图处于活动状态时，AngularJs 导航栏父视图应该处于活动状态
【发布时间】：2016-06-23 00:07:23
【问题描述】：

我想实现第一个视图基于一些子视图，而主视图是抽象的 - 仅重定向到第一个子视图。我为导航实现了两个导航栏。一个用于普通视图的导航，第二个用于仅在主子视图上导航。我想知道当主子视图之一处于活动状态时，如何将主导航栏设置为在主页上处于活动状态。

顶部栏导航栏代码如下。当主页的任何子视图处于活动状态（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>

当子视图处于活动状态时，此路线已关闭，因为主导航栏被选中，但是当我将主视图更改为联系人时，我无法返回主页，因为它是抽象视图：

.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'
})

【问题讨论】：

标签： angularjs typescript angular-ui-router navbar

【解决方案1】：

嗨，也许来晚了，但试试这个；）

<div ui-sref-active="{'active': 'admin.**'}">
  <a ui-sref-active="active" ui-sref="admin.roles">Roles</a>
</div>

【讨论】：

【解决方案2】：

解决办法是把active condition改为引用state对象，把ui-sref改为child path的href：

<li ng-class="{active: ctrl.$state.includes('home')}"><a href="/">Home</a></li>

这是有效的，但它并不优雅。有更好的解决方案吗？

【讨论】：