# Angular指令 指令指令（directive）是Angular中一個很重要的概念，相當于一個自定義的HTML元素，在Angular官方文檔中稱它為HTML語言的DSL（特定領域語言）擴展。按照指令的使用場景和作用可以分為兩種類型的指令： * 組件型指令（Component） * 裝飾型器指令（Decorator）， 它是在Angular 2.x中提出的概念，它們也同樣可以使用于Angular1.x。組件型指令主要是為了將復雜而龐大的View分離，使得頁面的View具有更強的可讀性和維護性，實現“高內聚低耦合”和“分離關注點”的有效手段；而裝飾器型指令則是為DOM添加行為，使其具有某種能力，如自動聚焦（autoFocus）、雙向綁定、可點擊（ngClick）、條件顯示/隱藏（ngShow/ngHide）等能力，同時它也是鏈接Model和View之間的橋梁，保持View和Model的同步。在Angular中內置的大多數指令，是屬于裝飾器型指令，它們負責收集和創建$watch，然后利用Angular的“臟檢查機制”保持View的同步。對于組件型指令和裝飾器型指令的這兩種區分是非常重要的，它們在寫法、業務含義、適用范圍等方面都有非常明顯的區別，理解了它們，對于我們日常的指令開發也具有很好的指導作用。 ## 組件指令 組件型指令組件型指令是一個小型的、自封裝和內聚的一個整體，它包含業務所需要顯示的視圖以及交互邏輯，比如：我們需要在首頁放置一個登錄框和一個FAQ列表，如果我們把它們都直接寫在首頁的視圖和控制器中，那么首頁的視圖和控制器將會變得非常龐大，這樣不利于我們的分工協作和頁面的長期維護。這時候更好的方案應該是，把它們拆分成兩個獨立的內聚的指令login-panel和faq-list，然后分別將<login-panel></login-panel>和<faq-list></faq-list>兩個指令嵌入到首頁。注意，我們在這里拆出這兩個指令的直接目的不是為了復用，更重要的目的應該是分離View，促進代碼結構的優化，達到更好的語義化和組件化，當然對于這樣獨立內聚的指令，有時我們還能意外地獲得更好的復用性。組件型指令應該是滿足封裝的自治性、內聚性的，它不應該直接引用當前頁面的DOM結構、數據等。如果存在需要的信息，則可以通過指令的屬性傳遞或者利用后端服務接口來自我滿足。如login-panel應該在其內部訪問登錄接口來實現自我的功能封裝。它的Scope應該是獨立的（isolated），不需要對父作用域的結構有任何依賴，否則一旦父作用域的結構發生改變，可能它也需要相應地變更，這種封裝是很脆弱的。更好的封裝應該是“高內聚低耦合”的，內聚是描述組件內部實現了它所應該包含的邏輯功能，耦合則描述它和外部組件之間應該是盡量少的相互依賴。組件型指令的寫法通常是這樣的：記住，對于組件型指令，更重要的是內容信息的展示，所以我們一般不涉及指令的link函數，而應該盡量地將業務邏輯放置在Controller中。組件化的開發方式以及組件化的復用，是我們在前端開發中一直追求的一個理想目標。從最初的iframe、jQuery UI、Extjs、jQuery easyui，我們一直在不懈地朝著組件化的方向前進。Angular首次在其框架中提出指令這種以HTML DSL方式進行語義化、組件化擴展的方式，就我們在這里描述的組件型指令。 ## 裝飾器型指令 裝飾器型指令主要用于添加行為和保持View和Model的同步，所以它不同于組件型指令，我們經常需要進行DOM操作。其restrict屬性通常為A，也就是屬性聲明方式，這種方式更符合裝飾器的語義：它并不是一個內容的主體，而是附加行為能力的連接器。同時，由于多個裝飾器很可能被用于同一個指令，包括獨立作用域指令，所以裝飾器型指令通常不使用新作用域或獨立作用域。如果要訪問綁定屬性，該怎么做呢？仍然看前面的例子<user-details name="test"details="details"on-update="updateIt（times）"></user-details>，假如不使用獨立作用域，我們該如何獲取這些屬性的值呢？·對于@型的綁定，我們可以直接通過attrs取到它：attrs.name等價于name：'@'。·對于=型的綁定，我們可以通過scope.$eval取到它：scope.$eval（attrs.details）等價于details：'='。&型的綁定理解起來會稍有困難，先看代碼：scope.$eval（attrs.onUpdate，{times：3}）；。和=型綁定一樣，onUpdate屬性在本質上是當前scope上的一個表達式。特殊的地方在于，這個表達式是一個函數，$eval發現它是函數時，就可以傳一個參數表（在Angular中稱之為locals）給它。onUpdate表達式中可以使用的參數名和它的參數值，都來自這個參數表。使用的時候，我們可以在視圖中引用這個哈希對象的某個屬性作為參數，在裝飾器指令中，其實還有一種細分的分支，它完全不操縱DOM，只是對當前scope進行處理，如添加成員變量、函數等。