Условно установлен Angular ng-класс на основе состояния

Я хотел бы условно установить класс элемента на основе состояния приложения (используя AngularUI Router). Я пробовал это, но он не работает:

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

Любые идеи?

Ответ 1

Причина, по которой это не сработало, заключалась в том, что, как указывал @charlietfl, $state не было в сфере охвата. Поэтому я добавил следующее к своему контроллеру состояния:

$rootScope.$state = $state;

и он отлично работал. Этот плункер является рабочим примером.

Ответ 2

Вы также можете использовать директиву ui-sref-active.

чтобы добавить класс active к вашему элементу, когда совпадение состояния ui-router использует

ui-sref-active="active"

см. http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

Ответ 3

Вы можете сделать что-то вроде этого:

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