Question

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

Answer 1

<强>更新

这个答案适用于Ui-Router的旧版本。对于最新版本（0.2.5+），请使用帮助程序指令ui-sref-active。详情here。

原始答案：

在控制器中包含$ state服务。您可以将此服务分配给作用域上的属性。

一个例子：

$scope.$state = $state;

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

$state.current.name

检查状态是否为当前活动状态：

$state.includes('stateName');

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

在您的课程示例中，您可以执行以下操作：

ng-class="{active: $state.includes('stateName')}"

Answer 2

您也可以使用 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＆amp; "stateName" | includedByState

Answer 3

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

您可以像这样使用它：

$state.is('stateName');

根据documentation:

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

Answer 4

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

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

在“2016年5月31日评论的tgrant59”评论中找到了here。

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

Answer 5

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

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

5 个答案: