Surveiller l'évolution de la classe sur l'élément dans la directive AngularJS

Lorsqu'une classe est ajoutée à un élément, je souhaite ajouter une autre classe à cet élément. Lorsqu'une classe est supprimée, je souhaite supprimer un élément. Je propose essentiellement certaines classes de bootstrap à certaines classes de validation de forme angulaire, mais je ne peux pas comprendre comment décrocher mon code lorsqu'une classe est ajoutée / supprimée d'un élément (en vous assurant de ne pas provoquer une boucle infinie de changement de classe) .

Voici ce que j'ai jusqu'ici pour ma 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 }; }]); 

Donc, fondamentalement, lorsque popupOn est ajouté à un élément, je souhaite ajouter la classe de bootstrap has-error à l'élément parent. Lorsque popupOn est supprimé, je souhaite supprimer has-error .

Qu'est-ce qui me manque pour que cela se produise dans Angular? Peut-être quelque chose avec ng-class et ne pas utiliser une directive?

Merci beaucoup!

Travaille ici

Vous pouvez essayer cette construction pour suivre les changements de classe:

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

Notez que l'ajout / suppression de la compréhension des cours qui montre provoquera un appel supplémentaire d'ajout de classe qui ne changera pas la valeur de l'attribut de classe.

Mais je pense que la meilleure approche utilisera la classe ng. Par exemple, dans un instant, vous souhaitez ajouter une classe 'popupOn', vous définissez une valeur de portée ($ scope.popup = true), puis spécifiez ng-class pour parent et 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> 

Lorsque vous souhaitez supprimer ces classes, il vous suffit de définir $ scope.popup value en false

Fiddle with ng-class

J'ajoute / supprime la classe:

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