Директива $watch не вызывается при изменении класса

Question

У меня есть угловое приложение, использующее левое меню, со строкой меню показать / скрыть, действие, чтобы показать / скрыть в левом меню, это "действие данных". Я использую Smart Admin и код, как показано ниже

<span class="minifyme" data-action="minifyMenu"> <i class="fa fa-arrow-circle-left hit"></i> </span>

Когда запускается data-action, класс раздела body изменяется или добавляется новый класс.

Мое требование - что-то сделать для смены класса. У меня есть директива на теле $ watch для класса.

Код директивы, безусловно, вызывается при загрузке страницы, но не при изменении класса, т. Е. При выполнении действия с данными.

(function () {
var app = angular.module("myApp");

var myDirective = [function () {
    return {
        restrict: "A",
        link: function (scope, element, attrs) {

            initialize();

            scope.$watch(function () {
             return element.attr('class');
        }, function (newValue) {
            if (element.hasClass('test')) {
                console.log('has class.');
            } else {
                console.log('classremoved.');
            }
        });

            function initialize() {

            };
        }
    };
}];

app.directive('myDirective', myDirective);

}());

Как я могу исправить эту проблему.

Answer 1

Вы должны сделать это в методе $apply(), поскольку data-action находится вне углового контекста.