Monitor for class changing on element in AngularJS directive

angularjs, angularjs-directive, javascript

Solution

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

Problem

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!

Original source