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!

Answer 1

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