AngularJS 指令解析（二）

AngularJS 指令解析（二）

---

第一篇咱們講過了做用域（scope）這塊內容，如今咱們進入正題，講AngularJS的指令。

什麼是指令？

這裏咱們引用官方的一句話：
Custom directives to access the DOM: In AngularJS, the only place where an application should access the DOM is within directives. This is important because artifacts that access the DOM are hard to test. If you need to access the DOM directly you should write a custom directive for this. The directives guide explains how to do this.

翻譯過來的，總結起來的意思就是應用程序能訪問DOM的惟一通道就是指令。這就是這句話的意思，後面幾句話是解釋，就是說一方面這個東西難測試，另外你想這麼作的話還能夠本身寫指令去直接訪問DOM。

在我看來，AngularJS的指令至關於小型的組件，一方面你能夠在指令裏面直接操做DOM，另外一方面指令模版可使得代碼控制的邏輯層面上能夠結構分明，下降scope控制上的耦合度。好比一個簡單的伸縮隱藏控制，通常會放到一個界面的做用域裏面去統一控制，可是若是後續有其餘一樣的表單也有這樣的處理，那就得每一個模塊各自寫一套了，控制上也不保證能保持一致。相比之下，咱們能夠將這樣相似的行爲放到一個組件裏面，由組件去自發的控制這個伸縮隱藏，反而能夠避免不少沒必要要的事情。

指令屬性

restrict

這個屬性定義的是指令的使用方法，分別有4種，默認是EA

• E 指定指令做爲元素使用
• A 指定指令做爲屬性使用
• C 指定指令做爲類名使用
• M 指定指令做爲註釋使用

我的推薦的寫法是，指令用A或者C，組件用E，這樣區分起來會很清楚。
而指令用A仍是用C取決於指令自身的使用範圍，好比有的指令只是控制一些顯示隱藏什麼的，那A綽綽有餘了，若是還有額外的全局樣式控制，那仍是C靠譜些，這樣代碼還工整些。

scope

這個屬性定義的是指令的做用範圍，分別有3種，默認是false

• false 與父做用域共用一個做用域
• true 繼承父做用域，建立一個子做用域
• {} 獨立做用域，與父做用域無關聯

我的的選擇依據在於有木有複雜的表單交互控制，如有，則選擇false能夠減小一些交互上的問題，反之選true或者是獨立做用域則是須要額外考量的，組件上則獨立做用域會好一點，而子做用域的設立能夠經過scope通訊解決一些比較小的通訊問題，同時也能保證做用域在必定程度上的獨立性。

而獨立做用域下有3種方式的通訊

• @ 屬性偵測
• & 事件繼承
• = 雙向綁定（除了ngModel以外）

通常是雙向綁定要好一些，特殊表單能夠用雙向綁定，可是數據輸入這塊仍是須要transclue的支持，並且直接跟父做用域交互會更好。

template or templateUrl

這個屬性很簡單明瞭，一個是指令模版字符串形式，另外一個是指令模版地址形式

replace

這個屬性代表要不要作替換插入，false是做爲子元素插入，反之是做爲替換插入

transclue

這個能夠類比vue的slot，內聯插入標籤內部的模版到ng-tranclude指令的標籤內

controller

這個屬性代表指令控制器能夠建立scope，scope在link函數裏面是共享的，做爲link函數的第一參數，這裏能夠寫一些須要綁定的事件，或者是數據處理

link

這個屬性表示指令編譯完成以後連接到DOM上的一些回調操做，pre表示連接以前，post表示連接以後，參數（做用域，模版元素，屬性列表，ngModel控制器）

• pre-link
• post-link

這裏能夠作一些數據監控上的處理，好比屬性監聽，並且對DOM操做比較多的事件能夠放到這裏去作而不是在controller裏面

compile

這個屬性指的是自定義的編譯方式，還有一個是參數綁定上的處理，比較危險，通常不建議操做的，參數（模版元素，屬性列表）