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