angularjs自定義指令屬性詳解

angularjs自定義指令屬性詳解

通常在使用angularjs過程中，很多時候angular自帶指令不能滿足我們對於各種業務的需求。這個時候我們需要自定義指令，自定義指令屬性詳解如下：

var directiveModule = angular.module("DirectiveModule",[]);
		//第一個爲指令名稱，採用駝峯命名，在使用時相應的駝峯位置換爲-如<ddd-directive></ddd-directive>也可以<ddd:directive></ddd:directive>
		directiveModule.directive("dddDirective",function(){
			return {
				//指定angularjs自定義指令使用的形式，有4中E元素<direc></direc>、A屬性<div direc></div>、C樣式<div class="direc"></div>、M註釋<!--direc-->
				//可以指定其中的一個或則者幾個使用方式
				restrict:'AECM',
				//是否用指令的template屬性定義的HTML模板內容替換指令所在的HTML元素
				replace:true,
				//template屬性指定angularjs指令被替換成的HTML模板，template指定的模板html元素中還可以使用指令
				//template:'<div>....<span>{{...}}<span></div>'
				//templateUrl屬性指定一個HTML文件作爲指令模板，效果和template屬性一致。
				templateUrl:'template.html',
				
				//link方法
				link:function(scope,elem,attrs,control){
					//參數解釋
					//scope參數：表示指令的作用域，默認情況下是同父作用域相同的
					//elem參數：表示當前指令的HTML元素。
					//attrs參數：表示一個對象，包含指令的所有屬性以及屬性值
					//control參數：表示一個controller對象，通常用訪問其他指令controller裏面的屬性和方法。
					
					//在link方法中，可以響應HTML元素的事件和監聽作用域模型數據變化
					
				}
				
				//compile方法
				//angularjs處理指令的流程：瀏覽器開始渲染HTML頁面時，首先加載HTML元素、創建文檔對象模型（DOM），加載完成後會觸發onload事件
				//如果使用了angularjs，Angularjs會監聽onload事件，然後從DOM元素中查找ng-app指令，如果找到就啓動Angularjs框架，接着從
				//ng-app指令所在的HTML標籤開始使用$compile服務遍歷DOM元素。我們使用的directive()方法註冊的指令都會保存在一個容器中，angularjs
				//從這些元素中識別指令元素，一旦指令被識別，就會執行指令定義的compile()方法。所有指令的compile()方法只會在angular啓動的時候執行一次。
				
				//compile的主要作用是用在link()方法執行之前對DOM元素進行修改。
				compile:function(tElem,tAttrs){
					//tElem:指令所在的元素。
					//tAttrs:指令元素的所有屬性列表。
				}
				
				
				//scope指令作用域
				//默認來說，如果不爲指令指定單獨的作用域，那麼指令將會使用父作用域
				//但是有兩種方式拜託父作用域：1.使用子子作用域從父作用域原型繼承。2.使用孤立作用域，創建一個新的作用域，與副作用與沒有任何關係。
				//如果指定scope屬性值位true，那麼指令將新創建一個作用域對象，該作用域對象會從父作用域原型繼承，如果希望指令作用域中擁有父作用域的所有模型數據可以採用這種方式。
				//scope:true,
				
				//定義單獨的作用域scope:{}，與父作用域完全分離。
				scope:{
					//在定義孤立的作用域裏面也可以和父作用域進行模型數據綁定。
					//例如在父作用域中一個屬性值，可以綁定到指令的作用域中
					
					//使用@符號建立給予屬性的綁定
					name:"@", //前面的name爲父作用域中的屬性，綁定到子作用域中的name屬性中，也可以單獨的爲子作用域中綁定屬性命名使用name:'@childName'，這裏就會使得父作用域的name屬性值會綁定到子作用域的childName屬性中
					
					//使用=符號進行雙向數據綁定
					Id:'=',//這裏也可以定義子作用域中的名稱只需Id:'=childId'，=是雙向數據綁定。
					
					//使用&符號進行與父作用域函數的綁定，調用父作用域的方法。
					countFn:'&'//這裏也可以定義子作用域中的名稱只需countFn:'&childCountFn'，=是雙向數據綁定。
				},
				
				
				//transclude（嵌入）
				//transclude屬性有三個值第一false（默認），第二true，第三element
				
				
				//controller方法和require屬性
				//指令對象的controller方法爲指令控制器的構造方法，主要用於和其它指令進行通信，我們可以在指令構造方法中定義一些屬性或方法供其它指令調用
				controller:function(){
					this.tabs = [];//指令的controller的屬性，指定require屬性，可以被其他指令訪問到
					
					this.addTab = function(tab){//controller的方法，指定require屬性，可以被其他指令訪問到
						this.tabs.push(tab);
					}
				},
				
				//require屬性指定要訪問的指令名稱，如果該指令與被訪問指令作用域有父子關係require屬性值爲：
				require:'^父指令名',//告述angularjs從當前元素及父元素查找controller對象，查找到require指定的指令後，那麼被查找到的指令的控制器將會作爲link方法的第四個參數傳進來，所以可以通過ctrl調用其它指令裏面的api。
				
				//需要注意的事link()函數的第四個參數爲一個controller對象，就是要訪問的controller,所以可以在link()方法中調用其他指令的controller裏面的方法
			}
		});