在AngularJS指令中监视元素变化类

当一个类被添加到一个元素时，我想向该元素添加另一个类。当一个类被删除时，我想删除一个元素。我基本上是将一些引导类映射到一些角度表单验证类，但是我无法弄清楚当从一个元素中添加/删除一个类时如何激发我的代码（还要确保不会导致某些无限循环的类更改）。在AngularJS指令中监视元素变化类

这里是我迄今为我的指令：

.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-error引导类添加到父元素。当删除popupOn时，我想删除has-error。

我错过了什么让Angular发生这种情况？也许与ng-class的东西，而不是使用指令？

非常感谢！

来源

2014-02-11 mikew

工作here

你可能想尝试这种结构遵循类的变化：

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

请注意添加/删除类的见解，看会造成这不会改变添加类的一个附加的呼叫类属性值。

但我认为更好的方法将使用ng级。例如，在一个时刻，你想添加一个“popupOn”类要设置一些范围值（$ scope.popup = TRUE），然后指定像这样纳克级的家长和孩子元素：

<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

Fiddle with ng-class

来源

2014-02-11 06:01:23

谢谢！我不认为我昨天晚上阅读文档时完全理解了这个构造。非常感谢。 – mikew

使用$动画元素时要小心。至于角度1.5，这可能不会立即触发动画完成状态，而只是针对“添加”状态。 –

** $ ** scope。$ watch - 有些人复制并粘贴！ – AhmadReza

-4

我添加/删除类：

来源

2015-05-22 08:27:05

在AngularJS指令中监视元素变化类

回答

相关问题