jQuery .addClass() not working with Angular.js

Question

In my code, I did

element.attr('class', element.attr('class') + ' state-active');

and the class .state-active got added to the element.

But when I try

element.addClass('state-active');

nothing happens.

It doesn't work, doesn't matter if I get the element with any of those:

var element = $('.state');
var element = angular.element($('.state'));
var element = angular.element($('.state')[0]);

I tried everything I could imagine, but none was enough. I noticed that .css() doesn't work either.

What could cause this issue and how do I solve this? For now my code is working, but that solution is not elegant...

Please try and reproduce it in a jsfiddle or plunker.

rdiz
– rdiz

2015-01-23 14:14:45 +00:00
Commented Jan 23, 2015 at 14:14 — rdiz
– rdiz, Commented Jan 23, 2015 at 14:14

James Waddington · Accepted Answer · 2015-01-23 14:16:09Z

2

Rather than using jQuery, try to approach the problem from a different angle (no pun intended!) such as using ngClass. This allows you to set classes according to conditions using data binding. It's usually better that way, letting Angular do the nuts&bolts of actually changing the DOM.

answered Jan 23, 2015 at 14:16

James Waddington

2,9252 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jpmelos Over a year ago

Indeed, that sounds better. I'll change the code to do that!

Collectives™ on Stack Overflow

jQuery .addClass() not working with Angular.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related