AngularJS directive傳回物件屬性詳解_AngularJS

 寫在前面：由於directive部分是angularjs中的重中之重，所以會分多篇章進行解釋。本章主要講解directive回傳物件中比較簡單的屬性

angularjs中使用.directive()來定義指令，該方法接收兩個參數：name（指令的名字）、factory_function（此函數定義指令的全部行為，傳回一個物件）

栗子：

//index.js
angular.module('myApp',[]);
myApp.directive('myDirective',function() {return {};});

傳回物件中包含以下屬性及方法：

1：restrict：String

這個屬性用來說明myDirective指令在DOM中是以何種形式被聲明的（即在html中該把它用在什麼地方）
此屬性可選值有：E(元素)、A（屬性，預設值）、C（類別名稱）、M（註解），可單獨使用，也可組合使用
看過一種說法：如果是想要自訂一個獨立的指令功能，即該指令獨立完成一系列操作，不用依附其他元素、屬性等，就將該指令定義為元素；如果想要用該指令來擴充某已存在指令的功能，便將其定義為屬性。不知道這麼理解是否合理，但確實也是一個很好的可以參考的選擇方法標準

2：priority：Number

此屬性用來定義指令的優先權（預設為0，ngRepeat是所有內建指令中優先權最高的，為1000），優先權高的先執行。

3：terminal：Boolean

該屬性與priority屬性有一定聯繫，它用來判斷是否停止運行當前元素上比本指令優先級低的指令，但相同優先級的依舊會執行
栗子：

//index.js
angular.module('myApp',[])
.directive('myDirective',function() {
  return {
    restrict: 'AE',
    priority: 1,
    template: '<div>hello world</div>'
  };
})
.directive('myDirective1',function() {
  return {
    restrict: 'AE',
    priority: 3,
    terminal: true
  };
})

<!-- index.html -->
<div my-directive my-directive1></div>

如果沒有定義myDirective1指令，結果瀏覽器會顯示hello world，但新增了myDirective1指令之後，並將其優先權priority設定比myDirective大，且在myDirective1上設定屬性terminal屬性為true之後，便會停止myDirective指令的執行。

 4：template：String/Function

這個屬性定義一個範本（即在html檔案中使用到該指令的部分會取代該範本內容，所以該範本主要是html格式）
屬性有兩種形式：一段html文字、一個傳回模板字串的函數，而函數接收兩個參數：tElement，tAttrs

 5：templateUrl：String/Function

當模板內容比較多時，直接嵌套在template中會顯得冗餘，可以採取將模板代碼單獨存放在一個文件中，這時就會需要引入文件，templateUrl便可以做到
屬性也有兩種形式：一個代表外部html檔案路徑的字串、一個傳回外部html檔案路徑字串的函數，該函數接收兩個參數：tElement，tAttrs 

6：replace：Boolean

此屬性預設值為false，指明範本是會被當做子元素插入到呼叫指令的元素內部，還是覆寫取代呼叫指令的元素。
栗子：

//index.js
angular.module('myApp',[])
.directive('myDirective',function() {
  return {
    restrict: 'A',
    template: '<div>hello world</div>',
    replace: true/false
  };  
}) 

 <!-- index.html -->
<my-directive></my-directive>

當repalce取false時，瀏覽器端源碼呈現為

hello world

取true時，呈現為

hello world

7：transclude：Boolean

栗子：

<!-- index.html -->
<div my-directive>world</div>

像這個例子中，如果指令內部有內容，一般情況下template模板會直接覆蓋替換掉該內容，但現在我想把它保留下來，這時transclude就派上用途了

//index.js
angular.module('myApp',[])
.dirctive('myDirective',function() {
  return {
    restrict: 'EA', 
    transclude: true,
    template: '<div>hello <span ng-transclude></span></div>'
  };
})

上面js程式碼會將html檔案指令中包含的world內嵌到模板中span元素中，注意，span元素加入了ng-transclude內建指令屬性（這點很重要）
總之，該屬性的作用，是告訴angularjs編譯器，將它從DOM元素中獲取的內容放到它發現ng-transclude指令的地方.
以上就是本文的全部內容，希望對大家的學習有所幫助。