Монитор для изменения класса на элементе в директиве AngularJS

Когда класс добавляется к элементу, я хочу добавить к этому классу другой класс. Когда класс удаляется, я хочу удалить элемент. Я в основном сопоставляю некоторые классы начальной загрузки с некоторыми классами проверки формы angular, но я не могу понять, как уволить мой код, когда класс добавляется/удаляется из элемента (также убедившись, что не вызывает некоторого бесконечного цикла класса меняется).

Вот что я имею до сих пор для моей директивы:

.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 bootstrap в родительский элемент. Когда popupOn удаляется, я хочу удалить has-error.

Что мне не хватает, чтобы это произошло в Angular? Может быть, что-то с ng-классом и не использовать директиву?

Спасибо большое!

Ответ 1

работает здесь

Возможно, вы захотите попробовать эту конструкцию, чтобы следить за изменениями в классе:

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

Обратите внимание, что добавление/удаление классов, которые смотрят, вызовет дополнительный вызов добавления класса, который не изменит значение атрибута класса.

Но я думаю, что лучшим подходом будет использование ng-класса. Например, в какой-то момент вы хотите добавить класс popupOn, вы задаете какое-либо значение области ($ scope.popup = true), а затем укажите ng-класс для родительского и дочернего элементов следующим образом:

<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-классом

Ответ 2

Я добавляю/удаляю класс:

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

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