在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被注釋掉了