监视 AngularJS 指令中元素的类更改 [英] Monitor for class changing on element in AngularJS directive

问题描述

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

这是我迄今为止的指令:

.directive('mirrorValidationStates', ['$log', function($log) {功能链接(范围，元素，属性){scope.$watch(element.hasClass('someClass'), function(val) {var classMap = {'popupOn': '有错误','ng-valid': '已经成功'};for(classMap 中的 var 键){if (element.hasClass(key)) {$log.info("设置类" + classMap[key]);element.parent().addClass(classMap[key]);} 别的 {$log.info("删除类" + classMap[key]);element.parent().removeClass(classMap[key]);}}});}返回 {链接:链接};}]);

所以基本上，当 popupOn 添加到元素时，我想将 has-error 引导类添加到父元素.当删除 popupOn 时，我想删除 has-error.

我错过了什么才能在 Angular 中实现这一点?也许有 ng-class 的东西而不使用指令?

非常感谢！

解决方案

作品 这里

你可能想尝试这种结构来跟随类的变化:

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

请注意，添加/删除监视的类洞察将导致添加不会更改类属性值的类的额外调用.

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

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

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

摆弄 ng-class

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!

解决方案

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

这篇关于监视 AngularJS 指令中元素的类更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！