angular.js - angularjs的載入編譯機制

Question

首先說的當下的技術環境：angular1.6,ui-route,require，疑問：
1、ui-route載入的template和動態註冊的controller誰先被編譯執行？例如：我想要取得template的#id的寬必須要$timeout?否則就出現undefine
2、自訂指令的compile是不是先於template載入?還是並行載入？
有點混亂，跪求解答，相關文章和解惑也跪謝！
附加題：{{}}會自動將型別轉換為字串吧？
謝謝，回答部分也非常感謝

Answer 1

官方有解釋，關於編譯過程的詳細介紹：

HTML 編譯分三個階段進行：

1. $compile 遍歷 DOM 並符合指令。

   如果編譯器發現某個元素與某個指令匹配，則該
   指令將會加入到與 DOM
   元素相符的指令清單中。單一元素可能會符合多個指令。

2. 一旦辨識出與 DOM 元素相符的所有指令，
   編譯器就會依優先權對指令進行排序。

   執行每個指令的編譯函數。每個compile
   函數都有機會修改DOM。每個編譯函數
   傳回一個連結函數。這些函數組成一個
   「組合」連結函數，它呼叫每個指令傳回的
   連結函數。

3. $compile 透過呼叫上一個步驟中的組合
   連結函數將模板與範圍連結起來。這反過來將呼叫各個指令的
   連結函數，在元素上註冊偵聽器
   ，並依照每個
   指令配置的範圍設定 $watchs。

其結果是範圍和 DOM 之間的即時綁定。所以此時，編譯範圍內模型的變更將反映在 DOM 中。

具體請題主詳讀 https://docs.angularjs.org/gu...這篇關於編譯器的文章。

Answer 2

1. 我認為的順序應該是這樣的：加載template同時走controller，在controller裡初始化數據，然後進入$digest階段來render template。所以controller載入過程中你取得template的#id的寬就有可能得不到。
   寫一個$timeout，會在$digest結束後執行timeout裡面的程式碼，並再次觸發一次$digest.

2. 自訂指令的compile階段其實是確定template的結構，compile階段可以更改template的結構，link階段就是準備數據，然後render template。

如有不對，歡迎指正討論。