Question

我已经安装了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 =＆＃34; / {{item.link}}＆＃34; ng-class =＆＃34; {active：$ uiRoute}＆＃ 34;

当我这样做时

/* public/css/common.css */

.active {
color: red !important;
}

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

为什么他们会把ui-route =＆＃34; / {{item.link}}＆＃34; ng-class =＆＃34; {active：$ uiRoute}＆＃34;如果突出显示不起作用？一厢情愿？

更新

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

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

Answer 1

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

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

Answer 2

将 ui-sref-active =＆＃34;有效＆＃34; 添加到均值标记代码。

<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;
}

MEAN堆栈激活：$ uiRoute无法正常工作

2 个答案: