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

我想在Angular中实现这一目标是什么？也许有一些ng-class而不使用指令？

非常感谢！

Answer 1

工作here

您可能想尝试这种结构来跟踪课程变化：

$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

即可

Fiddle with ng-class

Answer 2

我添加/删除课程：

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

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

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

2 个答案: