? ? ?理解angularjs之自定義指令盡管angularjs目前受關注程度遠遠低于Vuejs與reactjs，但對于從那個時代過來的前端來說，angular仍然是一個避不開的話題，況且以前大部分的項目都是采用angular進行開發。因此當你去了一家公司維護老項目以及升級版本的時候，就不得不去閱讀別人的代碼，你就很可能會接觸到angular的項目。所以，理解angular還是很有必要的。但是，angularjs對于初學者來說確實不大友好，繁瑣的語法，晦澀的自定義指令（即Vue中的組件）語法，往往給初學者帶來很大困擾。本文旨在用淺顯移動的話以及簡單的demo解釋angular的自定義指令，希望能給初學者一點小小的幫助。什么是自定義指令呢？隨著前端技術的快速發展，現在前端技術早已過了jQuery以及模塊化的時代，而進入了組件化、虛擬DOM的時代。angular中沒有組件的概念，跟組件類似的是以元素形式存在的自定義指令，本文所說的自定義指令專指組件，下文用組件指代自定義指令。關于angular的基礎知識本文不再涉及，如果你還不知道angular的基礎，請自行查閱相關文檔。封裝組件自然是為了代碼的復用，那么怎么封裝組件呢？
1、創建angular實例：var app = angular.module('myapp', []);
2、調用app掛載的directive方法，該方法接受兩個參數，第一個參數是組件名，第二個參數是匿名函數,該函數必須返回一個對象
? ? 這樣一個簡單的組件就封裝好了，你可以在頁面中使用例如在app的區域內使用，頁面就會顯示hello world。不過這個組件的功能很單一，而且模板內的數據都是死的，達不到我們對于組件的要求。下面我們慢慢完善.
給返回的對象添加配置項
replace: true,表示是否要將組件替換，瀏覽器并不認識未經解析的組件，我們設置為true;
transclude: true,處理指令里面的dom在哪里顯示，給模板的某個dom節點添加ng-transclude，就是把指令的innerHTML放到模板的那個節點上
link就相當于controller，給模板提供方法和屬性.
scope當前模板的作用域，element模板的最外層元素，attrs就是當前指令上所有的屬性
?現在我們的組件就成了這樣；
在頁面上使用：<hello>我將會顯示在具有ng-transclude屬性的標簽內</hello>,
?數據依舊是寫死了的，那么要怎么從外界傳遞數據進來呢？這到了angularjs最難以理解的部分了
配置scope： 這時我們的模板變為
scope:{book:'@booc',title:'=bookTitle',changeTitle:'&',color:'=colorTitle'}
?調用組件
<hello booc="boo" color-title="c" book-title="t"? change-title="sayName(name,money)">?
? ? ? ? ? ?{{content}}
</hello>
angularjs為我們想了一個辦法來傳遞數據——通過自定義屬性的形式，scope配置項中出現了三個特殊符號——@，=，&，為我們指定了屬性傳遞的格式。
@表示模板中的book變量的值通過外界的booc這個屬性傳遞進來，并且傳遞的值只能是字符串，即本例中boo是字符串；
=表示模板中的title變量的值通過外界的bookTitle這個屬性傳值進來，并且傳遞的只能是變量，也就是說在本例中t是一個變量，注意scope中的駝峰形式的名稱在調用組件時必須寫成中劃線形式；
&表示從外界傳遞一個方法進來；本例模板中的changeTitle通過外界的change-title屬性傳遞進來，即外界的sayName方法最終賦給了changeTitle，注意模板中調用外界方法的時候，傳遞的參數只能是一個對象，外界函數在接收參數的時候，形參也必須跟該對象的屬性名相同。
終于大功告成，一個功能相對完善的組件就封裝好了
?對于后續的完善與抽象，就需要根據實際工作的需要進行了，本文不再講述了
