寫在前面:由於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時,浏覽器端源碼呈現為<my-directive><div>hello world</div></my-directive>
取true時,呈現為<div>hello world</div>
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指令的地方.
以上就是本文的全部內容,希望對大家的學習有所幫助。