angular.js中指令compile與link原理剖析


在angularJs應用啟動之前,它們是以HTML文本形式存在文本編輯器當中。應用啟動會進行編譯和鏈接,作用域會同HTML進行綁定。這個過程包含了兩個階段!

編譯階段

  在編譯的階段,angularJs會遍歷整個的文檔並根據JavaScript中指令定義來處理頁面上什么的指令。在遍歷的過程中,有可能一層套着一層,一直延深處遍歷。一但遍歷和編譯完畢就會返回一個叫做模板函數的函數。在這個函數沒被返回(return)之前我們可以對編譯后的DOM樹進行修改。通常情況下,如果設置了compile函數,說明我們希望在指令和實時數據被放到DOM中之前
進行DOM操作,在這個函數中進行諸如添加和刪除節點等DOM操作是安全的。本質上,當我們設置
了link選項,實際上是創建了一個postLink() 鏈接函數,以便compile() 函數可以定義鏈接函數。編譯函數(compile)負責對模板DOM進行轉換
鏈接函數(link)負責將作用域和DOM進行鏈接






1.compile

  compile選項可以返回一個對象或函數。

compile函數自身不會經常去寫,但是link函數經常被使用。請看下面的例子

我們寫了一個DIV標簽,定義了一個autohello的一個屬性,屬性值5.   我們想把 “小平你好的這幾句話”輸出5遍。我們定義個一個compile 的函數,里面進行了一些DOM操作。在angularJs里面內置了一個小型的jq,所以我們可以用jq的寫法來操作。

  頁面輸出如下:

 

 

在最后return一個閉包函數,其實就是我們的所說的link函數。平常我們這樣定義的compile函數很少用,多種寫法,因為寫起來比較復雜。

    有的同學還挺好奇的,你不是說最后返回的函數是link嗎?我可以寫多個link函數嘛?為了滿足同學的好奇心,我們可以這樣改寫

然后輸出:不起作用哦!!如果同時設置了這兩個選項,那么會把compile
所返回的函數當作鏈接函數,而link選項本身則會被忽略。

  那如果我們注釋掉compile函數呢?結果會怎樣呢?

  結果得出:這個link起作用哦。因為compile被注釋掉了

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM