2013-10-02 21 views
1

到目前爲止,我所瞭解的是「指令用於簡化DOM操作」。現在來了AngularJS的編譯和鏈接功能。我已閱讀了這些主題,但我無法理解背後的情況。相當於JQuery中Angular Js的編譯和鏈接功能

糾正我,如果我錯了,讓我在這裏把我的理解。當我們只想將一些元素附加到我們的DOM時,我們使用編譯功能。讓我們看看,我想動態地添加5個li到我的div,我會去編譯函數。當我想附加一些事件偵聽器爲這些李的我會去與鏈接功能。

任何人都可以告訴我一個實際區別/使用這兩個功能與jQuery比較。

+0

你爲什麼想用jQuery進行比較呢? 我認爲你簡單地使用了指令,這些指令不僅僅用於更簡單的DOM操作。如果你想在Angular中操作DOM,你必須使用一個指令,但是你可以用它做很多事情。 'compile'和'link'之間的區別是定時,編譯函數在角度引導頁面的時候會被調用一次,然後產生一個鏈接函數,在每次模型更改時調用鏈接函數,將範圍鏈接到DOM,設置$觀察者等... – DotDotDot

回答

0

您可能已經注意到,在角度上還有其他non-html attributes(以及某些情況下的元素)。這些是與Angular捆綁在一起的標準指令。在JQuery中如何進行DOM操作與如何在Angular中執行相同操作之間存在根本區別。在JQuery中,你查詢DOM - 這是什麼意思?這意味着,一旦您的HTML由DOM解析器解析,它會創建一個樹結構(您的DOM tree),查詢實際上是針對這棵樹。

當您運行查詢時 - 查詢功能貫穿整個DOM樹,試圖找到您想要的DOM節點。當它發現它們時,它收集它們並返回給你這個節點集合。當然,聰明的Jquery開發人員通常會緩存這些節點(這樣他們就不必再進行昂貴的查詢操作)。一旦通過查詢找到了DOM節點,使用jQuery,我們傾向於操縱這個DOM節點。操縱可以是任何從添加更多節點到它,添加類,添加樣式,刪除所述節點等。

角度作品在這個查詢部分略有不同。當Angular bootstraps(在文檔準備就緒時)會遍歷$ rootElement中的所有DOM節點($ rootElement是您引導的元素 - 無論是手動傳遞還是使用ng-app)。在瀏覽這些DOM節點時,它會檢查每個DOM節點的名稱及其所有屬性,類等等。它會將這些名稱與它已收集的名稱列表進行匹配。它已經定義的指令列表和你定義的指令列表。該列表實際上是在配置階段收集的。所以,每次它匹配節點名稱等與它已經註冊的指令,它編譯它。基本上它將所述DOM視爲模板 - 您可能聽說過在其他模板系統中編譯模板。當你編譯一個模板時,你會得到一個函數 - 這實際上是鏈接函數。當這個鏈接函數傳遞數據(即$ scope)時,它返回最終的輸出HTML - 鏈接到數據。編譯函數總是接受一個模板,然後返回鏈接函數。鏈接函數總是獲取數據並返回模板。

您可能想知道爲什麼我們在填寫所有我們編寫的自定義指令的鏈接函數時從不返回任何模板。我們在那裏編寫的函數有一個後鏈接函數鉤子(或回調函數),因此我們不必在那裏做任何返回。當你從編譯函數返回某些東西時也是如此。

當您想對模板進行修改時使用編譯功能(因此,爲什麼您很少使用編譯功能!)。如果您希望在DOM元素與數據連接後進行修改,則可以使用鏈接功能。

你也可能想看看這個答案對於進一步的細節:

https://stackoverflow.com/a/15681173/1057639