快捷導(dǎo)航

AngularJS directive返回對(duì)象屬性詳解

更新時(shí)間：2016年03月28日 15:00:58 作者：waiting_h

這篇文章主要為大家纖細(xì)介紹了AngularJS directive返回對(duì)象屬性的相關(guān)內(nèi)容，感興趣的小伙伴們可以參考一下

寫在前面：由于directive部分是angularjs中的重中之重，所以會(huì)分多篇章進(jìn)行講解。本章主要講解directive返回對(duì)象中比較簡(jiǎn)單的屬性

angularjs中使用.directive()來定義指令，該方法接收兩個(gè)參數(shù)：name（指令的名字）、factory_function（該函數(shù)定義指令的全部行為，返回一個(gè)對(duì)象）

栗子：

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

返回對(duì)象中包含以下屬性及方法：

1：restrict：String

該屬性用來說明myDirective指令在DOM中是以何種形式被聲明的（即在html中該把它用在什么地方）
該屬性可選值有：E(元素)、A（屬性，默認(rèn)值）、C（類名）、M（注釋），可單獨(dú)使用，也可組合使用
看到過一種說法：如果是想要自定義一個(gè)獨(dú)立的指令功能，即該指令獨(dú)立完成一系列操作，不用依附其他元素、屬性等，就將該指令定義為元素；如果想要用該指令來擴(kuò)展某已存在指令的功能，便將其定義為屬性。不知道這么理解是否合理，但確實(shí)也是一個(gè)很好的可以借鑒的選擇方法標(biāo)準(zhǔn)

2：priority：Number

該屬性用來定義指令的優(yōu)先級(jí)（默認(rèn)為0，ngRepeat是所有內(nèi)置指令中優(yōu)先級(jí)最高的，為1000），優(yōu)先級(jí)高的先執(zhí)行。

3：terminal：Boolean

該屬性與priority屬性有一定聯(lián)系，它用來判斷是否停止運(yùn)行當(dāng)前元素上比本指令優(yōu)先級(jí)低的指令，但相同優(yōu)先級(jí)的依舊會(huì)執(zhí)行
栗子：

//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指令，結(jié)果瀏覽器會(huì)顯示hello world，但添加了myDirective1指令之后，并將其優(yōu)先級(jí)priority設(shè)置比myDirective大，且在myDirective1上設(shè)置屬性terminal屬性為true之后，便會(huì)停止myDirective指令的執(zhí)行。

4：template：String/Function

該屬性定義一個(gè)模板（即在html文件中使用到該指令的部分會(huì)替換該模板內(nèi)容，所以該模板主要是html格式）
屬性有兩種形式：一段html文本、一個(gè)返回模板字符串的函數(shù)，并且該函數(shù)接收兩個(gè)參數(shù)：tElement，tAttrs

5：templateUrl：String/Function

當(dāng)模板內(nèi)容比較多時(shí)，直接嵌套在template中會(huì)顯得冗余，可以采取將模板代碼單獨(dú)存放在一個(gè)文件中，這時(shí)就會(huì)需要引入文件，templateUrl便可以做到
屬性也有兩種形式：一個(gè)代表外部html文件路徑的字符串、一個(gè)返回外部html文件路徑字符串的函數(shù)，該函數(shù)接收兩個(gè)參數(shù)：tElement，tAttrs

6：replace：Boolean

該屬性默認(rèn)值為false，指明模板是會(huì)被當(dāng)做子元素插入到調(diào)用該指令的元素內(nèi)部，還是覆蓋取代調(diào)用該指令的元素。
栗子：

//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>

當(dāng)repalce取false時(shí)，瀏覽器端源碼呈現(xiàn)為<my-directive><div>hello world</div></my-directive>
取true時(shí)，呈現(xiàn)為<div>hello world</div>

7：transclude：Boolean

栗子：

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

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

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

上面js代碼會(huì)將html文件指令中包含的world內(nèi)嵌到模板中span元素中，注意，span元素添加了ng-transclude內(nèi)置指令屬性（這點(diǎn)很重要）
總之，該屬性的作用，是告訴angularjs編譯器，將它從DOM元素中獲取的內(nèi)容放到它發(fā)現(xiàn)ng-transclude指令的地方.
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: