如何在指令中检测当前状态


86

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

Answers:


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


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

3
对于具有参数的状态呢?
Bradley Trager 2013年



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。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.