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

Question

我想基于应用程序状态有条件地设置元素的类(使用AngularUI路由器).我试过这个,但它不起作用:

<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指令.

active在ui-router状态匹配use时将类添加到元素

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;

它运作得很好.这个plunker是一个工作的例子.

Answer 3

你可以这样做:

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