为什么指令中的 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

很可能是因为：

您没有引用 JQuery ...或...

您的 JQuery 参考没有出现在之前您的角度参考

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

如果 Angular 在加载时看到 JQuery，element 将是一个完整的 JQuery 对象，否则它是 jqLit​​e。

Answer 2

我注意到了几件事：

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){
 ...
}