web-dev-qa-db-fra.com

Comment vérifier si l'élément a classe avec AngularJS?

J'ai un menu hors panneau qui fonctionne parfaitement sur un site. L'utilisateur peut l'ouvrir et le fermer à l'aide d'un navicon ou en le faisant glisser avec le doigt.

À l’heure actuelle, j’ai une très jolie icône de navicon qui passe de l’icône de menu à l’icône X lorsque l’on clique dessus (et ouvre le menu) et l’inverse lorsque l’utilisateur clique à nouveau et que le menu se ferme. Bien que l'utilisateur glisse le menu ouvert ou fermé au lieu d'utiliser le navicon, la transition n'est pas déclenchée, ce qui pourrait créer des confusions sur l'UX (c'est-à-dire que le menu est fermé et que le navicon affiche un X au lieu des 3 lignes horizontales régulières). icône).

Donc, le navicon a maintenant le code suivant pour déclencher la transition:

ng-click="open = !open" ng-class="{'open-mob':open}">

Je pensais qu’un moyen simple et agréable de résoudre ce problème consisterait à déclencher cette commande "open =! Open" chaque fois que le menu est ouvert ou fermé, car js du panneau off ajoute la classe slidRight à la section principale lorsque Le menu est ouvert et le supprime quand il est fermé.

Dans ce cas, existe-t-il un moyen simple de vérifier si la classe utilise AngularJS? Quelque chose comme si class = slidRight -> "open =! Open".

Merci!!

angularjsmenu
33
Eric Mitjans

Angular utilise nativement le fichier .hasClass () de jqLite.

Lisez ici les angular docs pour plus d’informations.

http://docs.angularjs.org/api/angular.element

https://docs.angularjs.org/api/ng/function/angular.element

22
Mindstormy

pour ceux (y compris moi) qui n'ont pas compris la documentation d'Angular, voici un exemple qui a fonctionné pour moi:

angular.element(myElement).hasClass('my-class');

angular.element(myElement).addClass('new-class');

angular.element(myElement).removeClass('old-class');

espérons que cela aide quelqu'un ...

87
vidriduch