DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> AngularJS directive返回對象屬性詳解
AngularJS directive返回對象屬性詳解
編輯:關於JavaScript     

 寫在前面:由於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指令的地方.
以上就是本文的全部內容,希望對大家的學習有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved