angular自定義指令－directive

Directive究竟是個怎么樣的一個東西呢？我個人的理解是這樣的：將一段html、js封裝在一起，形成一個可復用的獨立個體，具體特定的功能。下面我們來詳細解讀一下Directive的一般性用法。

var myDirective = angular.module('directives', []);

myDirective.directive('directiveName', function($inject) {
 return {
 template: '<div></div>',
 replace: false,
 transclude: true,
 restrict: 'E',
 scope: {},
 controller: function($scope, $element) {

 },
 complie: function(tElement, tAttrs, transclude) {
 return {
 pre: function preLink(scope, iElement, iAttrs, controller) {

 },
 post: function postLink(scope, iElement, iAttrs, controller) {

 }
 };
 },
 link: function(scope, iElement, iAttrs) {

 }
 };
});
這里直接return了一個object，對象中包括比較多的屬性，這些屬性都是對自定義directive的定義。

• name
  表示當前scope的名稱，一般聲明時使用默認值，不用手動設置此屬性。
• priority
  優先級。當有多個directive定義在同一個DOM元素上時，有時需要明確他們的執行順序。這個屬性用於在directive的compile function調用之前進行排序。如果優先級相同，則執行順序是不確定的（根據經驗，優先級高的先執行，相同優先級時按照先綁定后執行）。
• teminal
  最后一組。如果設置為true，則表示當前的priority將會成為最后一組執行的directive，即比此directive的priority更低的directive將不會執行。同優先級依然會執行，但是順序不確定。
• scope
  • true
    將為這個directive創建一個新的scope。如果在同一個元素中有多個directive需要新的scope的話，它還是只會創建一個scope。新的作用域規則不適用於根模版，因為根模版往往會獲得一個新的scope。
  • {}
    將創建一個新的、獨立的scope，此scope與一般的scope的區別在於它不是通過原型繼承於父scope的。這對於創建可復用的組件是很有幫助的，可以有效的防止讀取或者修改父級scope的數據。這個獨立的scope會創建一個擁有一組來源於父scope的本地scope屬性hash集合。這些本地scope屬性對於模版創建值的別名很有幫助。本地的定義是對其來源的一組本地scope property的hash映射。
• controller
  controller構造函數。controller會在pre-linking步驟之前進行初始化，並允許其他directive通過指定名稱的require進行共享。這將允許directive之間相互溝通，增強相互之間的行為。controller默認注入了以下本地對象：
  • $scope 與當前元素結合的scope
  • $element 當前的元素
  • $attrs 當前元素的屬性對象
  • $transclude 一個預先綁定到當前scope的轉置linking function
• require
  請求另外的controller，傳入當前directive的linking function中。require需要傳入一個directive controller的名稱。如果找不到這個名稱對應的controller，那么將會拋出一個error。名稱可以加入以下前綴：
  • ? 不要拋出異常。這將使得這個依賴變為一個可選項
  • ^ 允許查找父元素的controller
• restrict
  EACM的子集的字符串，它限制了directive為指定的聲明方式。如果省略的話，directive將僅僅允許通過屬性聲明
  • E 元素名稱：
  • A 屬性名：
     
  • C class名：
     
  • M 注釋：
• template
  如果replace為true，則將模版內容替換當前的html元素，並將原來元素的屬性、class一並轉移；如果replace為false，則將模版元素當作當前元素的子元素處理。
• templateUrl
  與template基本一致，但模版通過指定的url進行加載。因為模版加載是異步的，所有compilation、linking都會暫停，等待加載完畢后再執行。
• replace
  如果設置為true，那么模版將會替換當前元素，而不是作為子元素添加到當前元素中。（為true時，模版必須有一個根節點）
• transclude
  編譯元素的內容，使它能夠被directive使用。需要在模版中配合ngTransclude使用。transclusion的有點是linking function能夠得到一個預先與當前scope綁定的transclusion function。一般地，建立一個widget，創建獨立scope，transclusion不是子級的，而是獨立scope的兄弟級。這將使得widget擁有私有的狀態，transclusion會被綁定到父級scope中。（上面那段話沒看懂。但實際實驗中，如果通過調用myDirective，而transclude設置為true或者字符串且template中包含的時候，將會將的編譯結果插入到sometag的內容中。如果any的內容沒有被標簽包裹，那么結果sometag中將會多了一個span。如果本來有其他東西包裹的話，將維持原狀。但如果transclude設置為’element’的話，any的整體內容會出現在sometag中，且被p包裹）
  • true/false 轉換這個directive的內容。（這個感覺上，是直接將內容編譯后搬入指定地方）
  • ‘element’ 轉換整個元素，包括其他優先級較低的directive。（像將整體內容編譯后，當作一個整體（外面再包裹p），插入到指定地方）
• compile
  這里是compile function，將在下面實例詳細說明
• link
  這里是link function ，將在下面實例詳細講解。這個屬性僅僅是在compile屬性沒有定義的情況下使用。

參考地址：http://blog.gejiawen.com/2014/07/16/usage-for-angularjs-directive/

先上指令的模板。可以看出，指令包含一個輸入框一個下拉選擇框。

 

指令的邏輯部分：

 參考地址：http://blog.gejiawen.com/2015/12/20/using-ng-model-controller-with-angular-directive/?utm_source=tuicool&utm_medium=referral