How to check if element has class with AngularJS?

Question

I have an off panel menu working perfectly on a site. The user can open and close it using both a navicon or sliding it with the finger.

Right now I have a very nice navicon icon that transitions from Menu Icon to X Icon when is clicked (and opens the menu) and the other way around when is clicked again and the menu closes. Buuut if the user slides the menu open or closed instead of using the navicon, the transition is not triggered, which might lead to confusions on the UX (i.e. the menu being closed, and the navicon showing an X instead of the regular 3 horizontal lines icon).

So, the navicon has right now the following code to trigger the transition:

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

I thought that a nice and easy way to fix this, would be to trigger this "open = !open" every time that the menu is open or closed, as the js from the off panel adds the class slidRight to the main section when the menu is open, and removes it when it is closed.

Being so, is there some straight way to check if the class is there using AngularJS? Something like if class = slidRight -> "open = !open".

Thanks!!

Answer 1

for those (including me) who could not get their head around Angular's documentation, here is an example which worked for me:

angular.element(myElement).hasClass('my-class');  angular.element(myElement).addClass('new-class');  angular.element(myElement).removeClass('old-class'); 

hope this help someone ...

Answer 2

Angular uses jqLite's .hasClass() natively.

Read here on the angular docs for more info.

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

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