angularJS——自定義指令

 主要介紹指令定義的選項配置

 

  1 //angular指令的定義，myDirective ，使用駝峯命名法
  2 angular.module('myApp', [])
  3 .directive('myDirective', function ($timeout, UserDefinedService) {
  4 // 指令操做代碼放在這裏
  5 });
  6 
  7 //angular自定義指令 的使用，使用 「-」 來代替駝峯命名法
  8 <div my-directive></div>
  9 注意：爲了不與將來的HTML標準衝突，給自定義的指令加入前綴來表明自定義的
 10 命名空間。AngularJS自己已經使用了 ng- 前綴，因此能夠選擇除此之外的名字。
 11 在例子中咱們使用 my- 前綴（好比 my-derictive ） 。
 12 
 13 指令的生命週期開始於 $compile 方法並
 14 結束於 link 方法
 15 
 16 //自定義指令的所有可設置的屬性大體以下
 17 指令的選項以下所示，每一個鍵的值說明了能夠將這個屬性設置爲什麼種類型或者什麼樣的
 18 函數：
 19 angular.module('myApp', [])
 20 .directive('myDirective', function() {               //指令名稱myDirective
 21 return {                //返回一個對象
 22 restrict: String,      //可選字符串參數，能夠設置這個指令在DOM中能夠何種形式被聲明，
 23             //默認爲A（attr(當作標籤屬性來使用)）<div my-directive></div> 
 24             // 設置爲「E」(ele,(直接當作標籤來使用)) <my-directive></my-directive>
 25             //C（類名）
 26             //<div class="my-directive:expression;"></div>
 27             //M（註釋）
 28             //<--directive:my-directive expression-->
 29             //這些選項能夠單獨使用，也能夠混合在一塊兒使用：
 30             //angular.module('myDirective', function(){
 31             //    return {
 32             //        restrict: 'EA' // 輸入元素或屬性
 33             //    };
 34             //})
 35 
 36 priority: Number, //優先級，可忽略，默認爲0， ngRepeat的優先級爲1000，這樣就能夠保證在同一元素上，它老是在其餘指令以前被調用。
 37 terminal: Boolean,//（布爾型），true或false,若是爲false,則這個參數用來告訴AngularJS中止運行當前元素上比本指令優先級低的指令。優先級相同的指令仍是會被執行。 ngIf 的優先級略高於 ngView ，
 38 template: String or Template Function: //（字符串或函數）指令中的一個重要的一個屬性，必須被設置其中一種
 39                     //1，  一段HTML文本；
 40                     //2，能夠接收兩個參數的函數，參數爲 tElement 和 tAttrs 
 41                     //在html模板中必須只有一個根html標籤,且若是有換行則須要使用「\」
 42                     //例如template: '\
 43                     //    <div> <-- single root element -->\
 44                     //        <a href="http://google.com">Click me</a>\
 45                     //        <h1>When using two elements, wrap them in a parent element</h1>\
 46                     //    </div>\
 47                     //function(tElement, tAttrs) (...},
 48                     //更好的選擇是使用 templateUrl 參數引用外部模板，參考下面的參數
 49 templateUrl: String,        //（字符串或函數）1，外部路徑的字符串，2，接受兩個參數的函數，參數爲 tElement 和 tAttrs ，並返回一個外部HTML文件路徑的字符串
 50                 //模板加載後，AngularJS會將它默認緩存到 $templateCache 服務中。（能夠提早加載模塊到緩存中，提升加載速度）
 51 replace: Boolean or String,  //（布爾型）默認爲false(模板內容會加載到標籤內部)，true(模板內容會替換當前標籤)
 52 scope: Boolean or Object,  //（布爾型或對象）,默認爲false, 設置爲true 時，會從父做用域繼承並建立一個新的做用域對象。
 53             // ng-controller 的做用，就是從父級做用域繼承並建立一個新的子做用域。
 54             //若是要建立一個可以從外部原型繼承做用域的指令，將 scope 屬性設置爲 true 
 55             //設置爲一個對象，則能設置 隔離做用域， scope 屬性設置爲一個空對象 {} 。若是這樣作了，指令的模板就沒法訪問外部做用域了：
 56             //例如.directive('myDirective', function() {
 57             //        return {
 58             //            restrict: 'A',
 59             //            scope: {},
 60             //            priority: 100,
 61             //            template: '<div>Inside myDirective {{ myProperty }}</div>'
 62             //        };
 63             //    });
 64 
 65             //在scope對象中，還可使用「@」 「=」 「&」,來設置模板中數據的做用域和綁定規則
 66             //"@"  本地做用域屬性：使用當前指令中的數據和DOM屬性的值進行綁定
 67             //「=」 雙向綁定：本地做用域上的屬性同父級做用域上的屬性進行雙向的數據綁定。
 68             //「&」 父級做用域綁定：經過 & 符號能夠對父級做用域進行綁定
 69             //例如
 70             //scope: {
 71             //    ngModel: '=', // 將ngModel同指定對象綁定
 72             //    onSend: '&', // 將引用傳遞給這個方法
 73             //    fromName: '@' // 儲存與fromName相關聯的字符串
 74             //}
 75 
 76 transclude: Boolean,  //默認爲false.只有當你但願建立一個能夠包含任意內容的指令時， 才使用 transclude: true 。
 77             //若是指令使用了 transclude 參數，那麼在控制器（下面立刻會介紹）中就沒法正常監聽數
 78             //據模型的變化了。
 79 controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... }, //（字符串或函數)註冊在應用中的控制器的構造函數
 80             //使用函數建立內聯控制器，例如
 81             //angular.module('myApp',[])
 82             //    .directive('myDirective', function() {
 83             //    restrict: 'A',
 84             //    controller:
 85             /    function($scope, $element, $attrs, $transclude) {
 86             //    // 控制器邏輯放在這裏
 87             //    }
 88             //})
 89 
 90 controllerAs: String,   //能夠在指令中建立匿名控制器,例如
 91             //.directive('myDirective', function() {
 92             //    return {
 93             //    restrict: 'A',
 94             //    template: '<h4>{{ myController.msg }}</h4>',
 95             //    controllerAs: 'myController',
 96             //    controller: function() {
 97             //        this.msg = "Hello World"
 98             //        }
 99             //    };
100             //});    
101 
102 
103 require: String, //（字符串或數組）字符串表明另一個指令的名字,若是沒有前綴，指令將會在自身所提供的控制器中進行查找，若是沒有找到任何控制器（或
104         //具備指定名字的指令）就拋出一個錯誤。
105         //例如
106         //若是不使用 ^ 前綴，指令只會在自身的元素上查找控制器。
107         //require: 'ngModel'
108         // 使用 ?   若是在當前指令中沒有找到所須要的控制器，會將 null 做爲傳給 link 函數的第四個參數
109         //require: '?ngModel'
110         //使用  ^  若是添加了 ^ 前綴，指令會在上游的指令鏈中查找 require 參數所指定的控制器。
111         //require: '^ngModel'
112         // 使用 ^？  將前面兩個選項的行爲組合起來，咱們可選擇地加載須要的指令並在父指令鏈中進行查找。
113         //require: '^?ngModel',
114 
115 link: function(scope, iElement, iAttrs) { ... }, //compile 選項自己並不會被頻繁使用，可是 link 函數則會被常用。
116                         //當咱們設置了 link 選項， 其實是建立了一個 postLink() 連接函數， 以便 compile() 函數能夠定義連接函數。
117                         //compile 和 link 選項是互斥的。若是同時設置了這兩個選項，那麼會把 compile
118                         //所返回的函數看成連接函數，而 link 選項自己則會被忽略。
119                         //一般狀況下，若是設置了 compile 函數，說明咱們但願在指令和實時數據被放到DOM中以前
120                         //進行DOM操做，在這個函數中進行諸如添加和刪除節點等DOM操做是安全的。
121         //用 link 函數建立能夠操做DOM的指令。
122         //require 'SomeController',
123         //link: function(scope, element, attrs, SomeController) {
124             // 在這裏操做DOM，能夠訪問required指定的控制器
125         //}
126 compile: function(tElement, tAttrs, transclude) {  
127         return {
128             pre: function(scope, iElement, iAttrs, controller) { ... },
129             post: function(scope, iElement, iAttrs, controller) { ... }
130         }
131         // 或者
132         return function postLink(...) { ... }
133     }
134 };
135 });