使用編譯函數向元素添加指令

我試圖創建一個簡單的指令來避免懸停的龐大元素。這是我有：使用編譯函數向元素添加指令

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

使用編譯函數向元素添加指令

回答

相關問題