87

我正在使用 AngularUI 的路由，我想做一个ng-class="{active: current.state}"，但我不确定如何在这样的指令中准确检测当前状态。

4

5 回答 5

146

更新：

这个答案适用于更旧版本的 Ui-Router。对于更新的版本（0.2.5+），请使用 helper 指令ui-sref-active。详情在这里。

原答案：

在你的控制器中包含 $state 服务。您可以将此服务分配给范围内的属性。

一个例子：

$scope.$state = $state;

然后获取模板中的当前状态：

$state.current.name

要检查状态是否当前处于活动状态：

$state.includes('stateName');

如果包含状态，则此方法返回 true，即使它是嵌套状态的一部分。如果您处于嵌套状态，user.details并且您检查了$state.includes('user')，它将返回 true。

在您的班级示例中，您将执行以下操作：

ng-class="{active: $state.includes('stateName')}"
于 2013-06-20T22:53:23.280 回答
115

您也可以使用ui-sref-active指令：

<ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
  </li>
  <!-- ... -->
</ul>

或过滤器： "stateName" | isState&"stateName" | includedByState

于 2014-02-14T22:22:42.520 回答
25

如果您使用的是 ui-router，请尝试 $state.is();

你可以像这样使用它：

$state.is('stateName');

根据文档：

$state.is ... 类似于 $state.includes，但只检查完整的州名。

于 2015-02-04T17:00:56.353 回答
1

对我有用的ui-sref-active指令的使用是：

<li ui-sref-active="{'active': 'admin'}">
    <a ui-sref="admin.users">Administration Panel</a>
</li>

如在标记为“tgrant59 于 2016 年 5 月 31 日发表评论”的评论下找到的。

我正在使用 angular-ui-router v0.3.1。

于 2017-06-16T13:47:01.903 回答
0

查看 angular-ui，特别是路由检查： http ://angular-ui.github.io/ui-utils/

于 2013-06-20T14:08:02.663 回答