监视AngularJS指令中元素的类更改

Question

将一个类添加到元素时，我想向该元素添加另一个类。当一个类被删除时，我想删除一个元素。我基本上是将一些引导程序类映射到某些角度形式验证类，但是当从元素中添加/删除一个类时，我无法弄清楚如何触发我的代码（还要确保不要引起类更改的无限循环）
。

到目前为止，这是我的指令的内容：

.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
  };
}]);

因此，基本上，当popupOn添加到元素时，我想将has-errorbootstrap类添加到父元素。何时popupOn删除，我想删除has- error。

我想在Angular中实现这一目标而错过了什么？也许有ng-class的东西而不使用指令？

非常感谢！

Answer 1

作品在这里

您可能想尝试此构造以遵循类更改：

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

请注意，观看的添加/删除类见解将导致添加类的另外一个调用，而不会更改类属性值。

但是我认为更好的方法是使用ng-class。例如，在您想添加一个’popupOn’类的时刻，您要设置一些范围值（$ scope.popup =
true），然后为父元素和子元素指定ng-class，如下所示：

<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>

当您想删除这些类时，只需将$ scope.popup值设置为false

用ng级提琴