javascript - 类更改时不会调用指令 $watch

Question

我有一个 Angular 应用程序，使用左侧菜单，带有显示/隐藏菜单栏，在左侧菜单上显示/隐藏的操作是“数据操作”。我使用的是智能管理，代码如下

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

当数据操作被触发时，主体部分类会发生更改或添加一个新类。

我的要求是对类(class)的变化做一些事情。我在主体上有一个指令 $watch for class。

指令代码肯定会在页面加载时被调用，但在类更改时(即执行数据操作时)不会被调用。

(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() 方法中执行此操作，因为数据操作超出了 Angular 上下文。