根据状态有条件地设置Angular的ng-class

Question

我想基于应用程序状态有条件地设置元素的类（使用AngularUI Router）。我试过这个，但它没有用：

<li ng-class="{active: $state.current.name === 'state1'}">State 1</li>
<li ng-class="{active: $state.current.name === 'state2'}">State 2</li>

有什么想法吗？

Answer 1

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

当ui-router状态匹配使用

时，将类active添加到元素中

ui-sref-active="active"

请参阅：http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

Answer 2

它没有工作的原因是，正如@charlietfl指出的那样，$ state不在范围内。所以我将以下内容添加到我所在州的控制器中：

$rootScope.$state = $state;

并且效果很好。 This plunker是一个有效的例子。

Answer 3

您可以这样做：

<li ng-class="{active: $state.includes('state1')}">State 1</li>
<li ng-class="{active: $state.includes('state2')}">State 2</li>