1. 程式人生 > >angular指令 directive

angular指令 directive

rmi 接受 元素 obj col compile object tab 雙向綁定

directive接受兩個參數,指令的名字(字符串)和方法(這個函數返回一個對象,其中定義了指令的全部行為):

angular.module(‘myApp‘, [])
.directive(‘myDirective‘, function() {
  return {
    restrict: String,
    priority: Number,
    terminal: Boolean,
    template: String or Template Function:function(tElement, tAttrs) (...},
    templateUrl: String,
    replace: Boolean or String,
    scope: Boolean or Object,
    transclude: Boolean,
    controller: String or 
function(scope, element, attrs, transclude, otherInjectables) { ... },     controllerAs: String,     require: String,     link: function(scope, iElement, iAttrs) { ... },     compile: //// 返回一個對象或連接函數,如下所示:
      function(tElement, tAttrs, transclude) {         return {           pre: function(scope, iElement, iAttrs, controller) { ... },           post:
function(scope, iElement, iAttrs, controller) { ... }         }
        //或者         return function postLink(...) { ... }       }   }; });

註:

  1. restrict:(E元素A屬性C類名M註釋)

    restrict是一個可選的參數。它告訴AngularJS這個指令在DOM中可以何種形式被聲明。默認AngularJS認為restrict的值是A,即以屬性的形式來進行聲明。

  2. priority:優先級

    優先級參數可以被設置為一個數值。大多數指令會忽略這個參數,使用默認值0,但也有些場景設置高優先級是非常重要甚至是必須的。

    如果一個元素上具有兩個優先級相同的指令,聲明在前面的那個會被優先調用。如果其中一個的優先級更高,則不管聲明的順序如何都會被優先調用:具有更高優先級的指令總是優先運行。

  3. terminal

    terminal是一個布爾型參數,可以被設置為true或false。這個參數用來告訴AngularJS停止運行當前元素上比本指令優先級低的指令。但同當前指令優先級相同的指令還是會被執行。

  4. template(字符串或函數)

    template參數是可選的,必須被設置為以下兩種形式之一:

      (1)一段HTML文本;

      (2)一個可以接受兩個參數的函數,參數為tElement和tAttrs,並返回一個代表模板的字符串。tElement和tAttrs中的t代表template,是相對於instance的。在討論鏈接和編譯設置時會詳細介紹,模板元素或屬性與實例元素或屬性之間的區別。

  5. templateUrl(字符串或函數)

    templateUrl是可選的參數,可以是以下類型:

      (1)一個代表外部HTML文件路徑的字符串;

      (2)一個可以接受兩個參數的函數,參數為tElement和tAttrs,並返回一個外部HTML文件路徑的字符串。

  6. replace

    replace是一個可選參數,如果設置了這個參數,值必須為true,因為默認值為false。默認值意味著模板會被當作子元素插入到調用此指令的元素內部

  7. scope參數(布爾型或對象)

    scope參數是可選的,可以被設置為true或一個對象。默認值是false。當scope設置為true時,會從父作用域繼承並創建一個新的作用域對象。

    隔離作用域:創建具有隔離作用域的指令需要將scope屬性設置為一個空對象{}。如果這樣做了,指令的模板就無法訪問外部作用域了。

    綁定策略:使用無數據的隔離作用域並不常見,AngularJS 提供了幾種方法能夠將指令內的隔離作用域同外部的作用域進行數據綁定。

      本地作用域屬性:使用@符號將本地作用域同DOM屬性的值進行綁定。指令內部作用域可以使用外部作用域的變量:@ (or @attr);

              雙向綁定:通過=可以將本地作用域上的屬性同父級作用域上的屬性進行雙向的數據綁定。就像普通的數據綁定一樣,本地屬性會反映出父數據模型中所發生的改變。= (or =attr)

              父級作用域綁定 通過&符號可以對父級作用域進行綁定,以便在其中運行函數。意味著對這個值進行設置時會生成一個指向父級作用域的包裝函數。& (or &attr)     

  8. transclude

    transclude是一個可選的參數。如果設置了,其值必須為true,它的默認值是false。

  9. controller(字符串或函數)

    controller參數可以是一個字符串或一個函數。當設置為字符串時,會以字符串的值為名字,來查找註冊在應用中的控制器的構造函數:

    

angular指令 directive