1

Есть некий контейнер c классом 'rowemail', к которому каким-то неизвестным способом добавляется некий класс 'error'

<div class="rowemail" test-test>
    Hello World
</div>

Как отследить событие добавление класса 'error'? Пробовал через директиву testTest с помощью $observe но ничего не получилось

function testTest() {
    return {
        link: function (scope, element, attrs) {
            attrs.$observe('class', function () {
               console.log(attrs.class);
            });
        }
    }
}

Мой пример

3
  • А почему способ добавления класса вам неизвестен? Насколько я знаю, если дело доходит до $watch / $observe, то это результат неправильной архитектуры кода. По самому вопросу гуглится что-то такое: stackoverflow.com/questions/21693064/… и stackoverflow.com/questions/15911300/….
    – Regent
    5 янв 2016 в 15:09
  • серверная часть написана на Yii (php фрэймворк). Там есть виджет - форма, если форма не проходит аякс валидацию(аякс валидация встроенная в виджет), то элементу добавляется класс error. Вот и нужно отследить это событие 5 янв 2016 в 15:34
  • plnkr.co/edit/OAHmeJj255JZGOqby3k9?p=preview если изменение происходит при нажатии кнопки в консоль выводится новый класс, но это не работает в моем проекте, когда изменение класса происходит "извне" 5 янв 2016 в 16:19

1 ответ 1

1

Для новых браузеров и IE>=11 можно использовать MutationObserver

// Code goes here

// Code goes here
angular
  .module('app', [])
  .controller('mainCtrl', function mainCtrl($scope) {
    $scope.changeClass = function() {

    }
  })
  .directive('testTest', function testTest() {
    return {
      restrict: 'A',
      scope: {
        't': '=testTest'
      },
      link: function(scope, element, attrs) {
        var observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
            console.log(mutation.type, mutation);
            
          });
          scope.$apply(function(){
            scope.t = element.attr('class');
          });
        });
        // configuration of the observer:
        var config = {
          attributes: true,
          attributeFilter: ['class']
        };

        // pass in the target node, as well as the observer options
        observer.observe(element[0], config);
        scope.$on('destroy', function() {
          observer.disconnect();
        });
      }
    }
  });

document.getElementById('btn').addEventListener('click', function() {
  document.getElementById('test').classList.add('error');
});
.rowemail {
  width: 100px;
  height: 100px;
  background-color: green;
}
.error {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div ng-app="app" ng-controller="mainCtrl">
  <div id='test' class="rowemail" test-test="t">
    {{t}}
  </div>
  <div>
    <input type="button" id="btn" value="btn" />
  </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.