使用编译函数向元素添加指令

我试图创建一个简单的指令来避免悬停的庞大元素。这是我有：使用编译函数向元素添加指令

app.directive('ngHover', function(){ 
    return { 
    compile: function($element,attr) { 
     $element.attr('ng-mouseenter',attr.ngHover + ' = true') 
       .attr('ng-mouseleave',attr.ngHover + ' = false') 
       .removeAttr('ng-hover'); 
    } 
    } 
})

产生的因素是什么，我会写（和会工作），但它似乎并没有前角用途$compile以复加。我可以手动使用$compile，但我想了解为什么这不起作用。

DEMO

来源

2014-07-13 Mosho

当您将指令动态添加到同一元素时（就像您在此处所做的那样），就太迟了 - 您的元素正在被编译，并且其上的属性已被缓存。添加它们没有意义 - 它们不会被编译。根据你正在尝试做的事情，我会创建一个自定义指令，*不使用其他指令。这就像你正在编写ngHover并在链接函数中操作DOM。看看ngMouseenter如何在角度源中实现，并对其进行建模。 – pixelbits

这是怎么compiler of Angular作品。

编译器是一个遍历DOM查找属性的Angular服务。编译过程分两个阶段进行。

编译：遍历DOM并收集所有的指令。结果是一个链接功能。

链接：用示波器结合指令并产生实时取景...

这意味着在当你编译功能的时间里面，你添加的属性，它的过去，编译器会从未发现并识别ng-mouseenter和ng-mouseleave作为指令。正如你所说，为了达到这个目标，你需要用$compile来触发另一轮的编译。

另请参阅this message和整个线程。在那里你可以看到，如果你在当前元素的子元素上设置了额外的指令，而不是在它自身上，它会起作用。

来源

2014-07-13 12:09:59 Sotomajor

使用编译函数向元素添加指令

回答

相关问题