Monitor for class changing on element in AngularJS directive

Question

When a class is added to an element, I want to add another class to that element. When a class is removed, I want to remove an element. I'm basically mapping some bootstrap classes to some angular form validation classes but I can't figure out how to fire my code when a class is added/removed from an element (also making sure not to cause some infinite loop of class changing).

Here is what I have thus far for my directive:

.directive('mirrorValidationStates', ['$log', function($log) {
  function link(scope,element,attrs) {
    scope.$watch(element.hasClass('someClass'), function(val) {
      var classMap = {
        'popupOn': 'has-error',
        'ng-valid': 'has-success'
      };

      for (var key in classMap) {
        if (element.hasClass(key)) {
          $log.info("setting class " + classMap[key]);
          element.parent().addClass(classMap[key]);
        } else {
          $log.info("removing class " + classMap[key]);
          element.parent().removeClass(classMap[key]);
        }
      }
    });
  }
  return {
    link: link
  };
}]);

So basically, when popupOn is added to an element, I want to add the has-error bootstrap class to the parent element. When popupOn is removed, I want to remove has-error.

What am I missing to make this happen in Angular? Maybe something with ng-class and not use a directive?

Thanks much!

Devid Farinelli · Accepted Answer · 2017-07-13 08:40:14Z

46

works here

You may want to try this construction to follow class changes:

$scope.$watch(function() {return element.attr('class'); }, function(newValue){});

Please notice that adding/removing classes insight that watch will cause one additional call of adding class that wont change class attribute value.

But I think the better approach will be using ng-class. For example in a moment you want to add a 'popupOn' class you are setting some scope value ($scope.popup = true) and then specify ng-class for parent and child element like so:

<div ng-class={'has-error': (popup==true)}>
    <div id="patient" ng-class={'popupOn': (popup==true)}>test</div>
    <button ng-click="addClass()">addClass</button>
    <button ng-click="removeClass()">removeClass</button>
</div>

when you want to remove those classes you just set $scope.popup value to false

Fiddle with ng-class

edited Jul 13, 2017 at 8:40

Devid Farinelli

7,5549 gold badges45 silver badges76 bronze badges

answered Feb 11, 2014 at 6:01

Fedor Skrynnikov

5,6494 gold badges30 silver badges34 bronze badges

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

5 Comments

mikew Over a year ago

Thanks! I don't think I fully comprehended that construction to $watch when I was reading the docs last night. Thanks much.

hugo der hungrige Over a year ago

Take care when using $animated elements. As for angular 1.5 this might not trigger for the animation completed state right away, but only for the 'add'-state.

Ahmad R. Nazemi Over a year ago

$ scope.$watch - some people copy and paste!

Fedor Skrynnikov Over a year ago

@AhmadReza in directives scope injection is position based rather than dependency injection like in controllers. So no need $ sign.

marksyzm Over a year ago

May as well just check for truthy instead of using popup == true

David Gonzalez · Accepted Answer · 2015-05-22 08:27:05Z

-5

I add/remove the class:

  function addClass() {
      var element = angular.element('#nameInput');
      element.addClass('nameClass');
  };

  function removeClass() {
      var element = angular.element('#nameInput');
      element.removeClass('nameClass');
  };

answered May 22, 2015 at 8:27

David Gonzalez

7717 silver badges6 bronze badges

Collectives™ on Stack Overflow

Monitor for class changing on element in AngularJS directive

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related