知識點:
1.指令包含的概念
2.指令的執行順序
3.指令中的scope
4.指令的長相
解釋:
指令作為angularjs中的一種面向組件編程的嘗試出現。符合webcomponents規范。用來打造可復用的組件。
常見的指令形式如下:
1.指令包含的概念
restrict 限定指令綁定元素、屬性
replace 表示是否進行替換
scope 表示指令自己的scope
compile 表示指令編譯階段的函數 返回link函數
link 表示指令的執行過程
element 表示指令所在元素。默認為jQLite,如果引入JQ,則為JQ對象。
attr 表示指令的屬性
2.指令的執行順序
引用引導啟動之后,Angular使用內置的$compile服務來遍歷DOM元素。遇到非瀏覽器元素的時候,開始認為是Angular指令。指令包含Angular內置指令(如ng-click)和自定義指令。掃描完所有指令之后,分別執行每個指令的compile方法。compile 方法返回一個 link 函數,被添加到稍后執行的 link 函數列表中。這被稱為編譯階段。如果一個指令需要被克隆很多次(比如 ng-repeat),compile函數只在編譯階段被執行一次,復制這些模板,但是link 函數會針對每個被復制的實例被執行。所以分開處理,讓我們在性能上有一定的提高。這也說明了為什么在 compile 函數中不能訪問到scope對象。在編譯階段之后,就開始了鏈接(linking)階段。在這個階段,所有收集的 link 函數將被一一執行。指令創造出來的模板會在正確的scope下被解析和處理,然后返回具有事件響應的真實的DOM節點。
3.指令中的Scope
指令是獨立的作用域。需要指定和父類controller作用域的關系。分為三種
默認:共享controller的scope,相當于雙向數據綁定。
{}:表示隔離獨有自己的作用域
scope:true 表示繼承父類scope,相當于拷貝了一份。
其中{}又分為三種策略: = & @
@表示拷貝父scope中的某個Model到自己的scope中
=表示拷貝付scope中的某個model,并且實現雙向數據綁定
&表示拷貝父類scope的方法到自己的scope
4.指令的長相