平均堆栈活动：$uiRoute 不工作答案

【问题标题】：MEAN stack active:$uiRoute not working平均堆栈活动：$uiRoute 不工作
【发布时间】：2014-07-13 19:51:03
【问题描述】：

我已经安装了MEAN stack。

<!-- public/views/header.html -->
<li data-ng-repeat="item in menu" data-ng-show="global.user" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">

通知ui-route="/{{item.link}}" ng-class="{active: $uiRoute}"

当我这样做时

/* public/css/common.css */

.active {
color: red !important;
}

当我在活动页面上时，菜单中的链接没有突出显示。如何突出显示当前页面？

如果突出显示不起作用，他们为什么要把 ui-route="/{{item.link}}" ng-class="{active: $uiRoute}" 放在那里？一厢情愿？

更新

最新版本的 Mean.IO 说明了这一点。它还使用了最新版本的 Angular UI-Router

<li data-ng-repeat="item in menus.main" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">

【问题讨论】：

似乎缺少某些部分，应该类似于{active: $uiRoute==item.link}
刚试过。没有骰子。好建议！让想法不断涌现：D

标签： angularjs mean-stack mean.io

【解决方案1】：

你用的是什么版本的ui-router？？？最新版本更容易让这种事情发挥作用。下载新版本，就这么简单：

<li data-ng-repeat="item in menu" data-ng-show="global.user" ui-sref="{{item.link}}" ui-sref-active="active">

【讨论】：

尝试使用最新的 Angular ui-router（撰写本文时为 2.1）。放入此代码，无论是否使用 data-ng-show="global.user" 都会导致链接消失。
感谢您的努力回答！ :)

【解决方案2】：

将 ui-sref-active="active" 添加到 a mean-token 标记中。

<ul class="navbar-nav nav">
  <li data-ng-repeat="item in menus.main" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">

      <a mean-token="item.link" ui-sref='{{item.link}}' ui-sref-active="active">{{item.title}}</a>
  </li>
</ul>

将 .active 类添加到 common.css

.active {
color: red !important;
}

【讨论】：