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里面的方法
			}
		});