Je voudrais définir de manière conditionnelle la classe d'un élément basé sur l'état de l'application (en utilisant le routeur angularui). J'ai essayé cela, mais cela 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>
3 Réponses :
La raison pour laquelle il n'a pas fonctionné était parce que @charlietfl a souligné, $ State n'était pas dans la portée. J'ai donc ajouté ce qui suit au contrôleur de mon état: et cela a fonctionné super. Ce plunker est un exemple de travail.
Y a-t-il une mise en garde pour cette approche?
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>
Salut puis-je connaître la raison de la dégradation de la réponse?
Vous ne pouvez pas l'utilisateur $ State dans html
@Vipul: c'est dans la documentation de l'UI-Routeur à utiliser est de cette façon. Essayez ce lien Github.com/angular-ui/ Ui-routeur / wiki / ...
Vous pouvez également utiliser la directive Pour ajouter la classe ui-sref-actif code>. active code> à votre élément lorsque l'état de l'UI-routeur correspond à utiliser P> ui-sref-active="active"
Mais pouvez-vous définir la valeur de l'état?
Je pense que cette approche est limitée lorsque vous utilisez Ui-Sref non?
est
$ état dans votre portée?Ceci est une expression valide pour que votre problème est autre chose, pas si vous avez un modèle spécifique.
Charlietfl a cloué. Ce plunker m'a aidé à comprendre: PLNKR.CO/EDIT/DDDCCANOFP=PREVIEW<