87 votes

Comment détecter l'état actuel dans la directive

J'utilise le routage d'AngularUI et j'aimerais effectuer un ng-class="{active: current.state}" mais je ne sais pas comment détecter exactement l'état actuel dans une directive comme celle-ci.

146voto

Cuong Vo Points 2159

Mise à jour:

Cette réponse a été pour beaucoup plus ancienne version de l'Interface utilisateur du Routeur. Pour les versions plus récentes (0.2.5+), veuillez utiliser le helper directive ui-sref-active. Les détails ici.


Réponse Originale À Cette Question:

Inclure le $service de l'état dans votre contrôleur. Vous pouvez affecter ce service à une propriété sur votre périmètre.

Un exemple:

$scope.$state = $state;

Ensuite, pour obtenir l'état actuel de vos modèles:

$state.current.name

Pour vérifier si un état est actif en cours:

$state.includes('stateName'); 

Cette méthode retourne true si l'état est inclus, même s'il fait partie d'un état imbriqué. Si vous étiez à un état imbriqué, user.details, et que vous avez vérifié pour $state.includes('user'), il faudrait retourner la valeur true.

Dans votre exemple de classe, vous feriez quelque chose comme ceci:

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

115voto

darthwade Points 454

Vous pouvez aussi utiliser la directive ui-sref-active :

 <ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
  </li>
  <!-- ... -->
</ul>
 

Ou filtres: "stateName" | isState & "stateName" | includedByState

0voto

John Tseng Points 3782

Découvrez angular-ui, en particulier, la vérification de route: http://angular-ui.github.io/ui-utils/

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X