父页面的角度路由器导航突出显示答案

【问题标题】：Angular router nav highlighting for parent page父页面的角度路由器导航突出显示
【发布时间】：2016-05-18 09:06:26
【问题描述】：

我有 2 个状态的 ui-router 声明如下：

.state('news', {
  url: '/news',
  views: {
    '': {
      templateUrl: '/partials/common/news/list.html',
      controller: 'NewsIndexController as news'
    }
  }
})

.state('newsShow', {
  url: '/news/:slug',
  views: {
    '': {
      templateUrl: '/partials/common/news/show.html',
      controller: 'NewsShowController as newsShow'
    }
  }
})

我的导航栏只有一个 news 链接：

<nav>
  <ul>
    <li>
      <a href="/news" ui-sref-active="active">News</a>
    </li>
  </ul>
</nav>

当我在单个新闻页面上时，如何使导航中的新闻链接处于活动状态？

【问题讨论】：

您应该通过命名您的状态“news.show”将状态“newsShow”设置为“news”的子级。 ui-sref-active 适用于一个州的任何孩子
@Jordane 这似乎破坏了应用程序，并且 newsShow 视图不再加载。

标签： javascript html angularjs

【解决方案1】：

你可以使用ng-class：

ng-class="{selected: $state.includes(state)}"

更多关于$state.includes这里：http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

希望这会有所帮助。

【讨论】：