Régler conditionnellement la classe ng d'Angular en fonction de l'état

Je voudrais de manière conditionnelle de la classe d'un élément basé sur l'état de l'application (à l'aide de AngularUI Routeur). J'ai essayé cela, mais ça ne fonctionne pas:

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

Des idées?

source d'informationauteur tronman

  1. 27

    Vous pouvez également utiliser la ui-sref-active directive.

    pour ajouter la classe active à votre élément de l'interface utilisateur-routeur état correspond à l'utilisation

    ui-sref-active="active"

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

  2. 8

    La raison pour laquelle il n'a pas de travail était parce que, comme @charlietfl souligné, $etat n'a pas été portée. J'ai donc ajouté ce qui suit à mon état du contrôleur:

    $rootScope.$state = $state;

    et il a très bien fonctionné. Cette plunker est un exemple de travail.

  3. 6

    Vous pouvez faire quelque chose comme ceci:

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