为什么指令中的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秒后将addClass添加到元素和removeClass。

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