Question

我想添加一个在更改元素类时会执行某些操作的指令。

我的指示是：</ p>

(function (angular) {

angular.module('myApp')
    .directive('myClassWatch', myClassWatch);

function myClassWatch() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs, controller) {
            scope.$watch(function () {
                return element.attr('class');
            }, function (newValue, oldValue) {
                debugger;
                if(oldValue !== newValue)
                    console.log('class changed from ' + oldValue + ' to ' + newValue);
            });
        }
    }
}
})(angular);

html是：

<div class="top-icons-item popup-container popup-link-container" my-class-watch>

</div>

我在其他地方做了一些操作，在我的div元素中切换“open”类 - 它在html中可见 - 但调用器从未被调用（当然也没有控制台日志）。我可以看到链接函数在页面加载时被调用，调试器也会停止，但那只是在页面加载时而不是之后我实际执行添加另一个类的操作时。

我在阅读之前已经阅读了几篇包含Directive : $observe, class attribute change caught only once的文章，但我无法理解为什么我得不到相同的结果。我该怎么做才能检查出现这种情况的原因？

更新：类更改是使用jQuery而不是在控制器中，而是在旧的jquery监视代码中。这可能是原因吗？当没有从角度代码中完成时，有角度可能没有意识到类更改吗？

Answer 1

将jQuery代码包装到$apply。

类似于您从角度上下文$scope更改(jquery ajax, setTimeout, etc)。使用$apply让角度了解所做的更改。

    angular.element(document.getElementById('app')).injector().invoke(['$compile', '$rootScope', function($compile, $rootScope) {
       $rootScope.$apply(function() {
           //your jquery code goes here...
           var a = document.getElementById('abc');
           angular.element(a).addClass('hello');
       });
    }]);

角度类更改指令不起作用

1 个答案: