Toggle Class Using Angular Directive

Question

I want to toggle a class using the code below (thanks to Zombi for the directive he made)

I cannot figure out how to change a class of an element "B" by clicking element "A". Could you please suggest anything?

Angular

module.directive('toggleClass', function() {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        element.bind('click', function() {
            element.toggleClass(attrs.toggleClass);
        });
    }
};

HTML

<li> <- Clicked Element
    <span toggle-class="open"></span> <-Toggled Class
</li>

it worked using the ng-class but I would like to stick to the directive since I will be using it everywhere in my app — egurb
– egurb, Commented Apr 12, 2016 at 7:51

MBN · Accepted Answer · 2016-04-12 08:04:43Z

2

Very simple, change your code like this:

module.directive('toggleClass', function() {
  return {
      restrict: 'A',
      link: function(scope, element, attrs) {
          element.parent().bind('click', function() {
              element.toggleClass(attrs.toggleClass);
          });
      }
  };
});

JSFiddle

answered Apr 12, 2016 at 8:04

MBN

1,0048 silver badges19 bronze badges

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

4 Comments

egurb Over a year ago

Indeed :) Thanks a lot!

egurb Over a year ago

Other thing is, what if I don't want the child element to be toggled? :) Asking just for future use...

MBN Over a year ago

Only change target from element.parent() to element

egurb Over a year ago

Oh sorry, forgot to comment, yes I figured out :) Many thanks for your help again!

Rishabh Jain · Accepted Answer · 2016-04-12 12:36:38Z

1

You can also look at [ng-class](https://docs.angularjs.org/api/ng/directive/ngClass,"ng-class usage") directive of angularjs.There is lot more you can do with that

answered Apr 12, 2016 at 12:36

Rishabh Jain

972 bronze badges

1 Comment

egurb Over a year ago

Thanks for the hint :)

Collectives™ on Stack Overflow

Toggle Class Using Angular Directive

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related