javascript - 为什么指令中的 element.addClass 不能正常工作？

Question

元素

<button ud-listener="item.status">{{item.value}}</button>

我有以下指令

myApp.directive('myDirective', function()
{
    return {
        restrict: 'A',
        link: function(scope, element, attrs)
        {
            scope.$watch(attrs.myDirective, function(val)
            {
                if(!isUndefined(val))
                {
                    element.addClass(val);
                    setTimeout(function(){
                        element.removeClass(val);
                    }, 2000);
                }
            });
        }
    }
});

我想做的是：

我正在使用 socket-io 接收 json 格式的数据，并且我正在观看包含该值的 myDirective，这是 add/-removeClass 所必需的。

一开始它就像一个魅力，指令将类添加到元素并在 2 秒后将其删除。没有任何问题。但是几分钟后，它并没有将类添加到所有元素中，而只是添加到其中的少数元素中。

还有另一种方法吗？我只想在 2 秒后向元素添加类并删除类。

Answer 1

我注意到了几件事：

1.您正在使用setTimeout而不是$timeout.

当你这样做时，你是在 Angular 上下文之外执行你的代码，所以它不知道进行脏检查。尝试更换

setTimeout(function(){
   element.removeClass(val);
 }, 2000);

和

$timeout(function(){
     element.removeClass(val);
}, 2000);

您还需要$timeout作为参数包含在指令工厂方法中。

2.你使用scope.$watch而不是attrs.$observe

我不确定这里的后果，但这就是我以前一直看到的方式。

尝试：

attrs.$observe('myDirective', function(val){
 ...
}

Answer 2

Most likely it's because either:

You're not referencing JQuery ... or...

Your JQuery reference doesn't come before your angular reference

   <script src="/scripts/jquery.js" type="text/javascript"></script>
   <script src="/scripts/angular.js" type="text/javascript"></script>

If Angular sees JQuery while it's loading, element will be a full JQuery object, otherwise it's jqLite.