代码模板:
var myModule = angular.module("myModule",[]);
myModule.directive('directiveName',function(){
return{
restrict:string,
template:string,
templateUrl:string,
priority:number,
replace:boolean,
transclude:boolean,
scope:bollean 或 object,
controller: string 或 function,
require: string 或 array,
link:function(scope,element,attrs){
},
compile:function(element,attrs,transclude){
}
...
}
});
restrict
指定了如何在模模板中使用自定义的指令。取值可为E、A、C、M中的一个,或任意组合。如:'A','EA','EAC','EACM'。若对象中没有指定restrict属性,默认为'A'。
E:表示元素的名称
A:表示元素的属性
C:表示CSS中的class
M:表示注释
template、templateUrl
template:指令的内联模板。
templateUrl:指令的内联模板的url。
priority
数字,可选参数,致命指令的优先级,若在单个DOM元素上有多个指令,则优先级高的先执行。
当然,设置指令的优先级不太常用,但是比较特殊的例子是,内置指令ng-repeat的优先级为1000,而ng-init的优先级为 450。
replace
若取值为true,模板(template)替换指令所在的元素;若取值为fasle,把模板(template)放在指令所在元素的内部。默认情况下,值为false。
把template的值设为'<span>good!</span>'
transclude
布尔值,默认值为false
这个配置选项可以让我们提取包含在指令那个元素里面的内容,再将它放置在指令模板的特定位置。当我们开启transclude之后,我们就可以使用ng-transclude来指明应该在什么地方放置transclude的内容
template值设置为'<span ng-transclude></span><span>good!</span>'
scope
(1)false
自定义指令的scope对象就是指令所在的scope对象(即作用域)。
(2)true
自定义指令新建了一个scope对象,并继承外层的scope。
(3)object
自定义指令创建了一个scope对象,不继承外层的scope,新建的scope是独立的,与外层scope隔离。
自定义指令scope需要通信时,可以通过传递属性名映射的方式把父scope中指定的属性传递给这个独立的scope。
绑定策略:
a.@
单向文本绑定,传递一个字符串值,传递的数据类型只能是字符串。当父作用域属性改变时,隔离的scope中的属性值随着变化;当隔离的scope中的属性值改变时,父作用域的属性值不随着变化。
b.=
双向绑定,传递父作用域的一个属性,传递的数据类型可以是字符串、数组、对象等。当父作用域属性改变时,隔离的scope中的属性值随着变化;当隔离的scope中的属性值改变时,父作用域的属性值也随着变化。
c.&
执行父作用域中的函数。
如下代码所示:
compile和link函数
指令主要分为两个阶段:编译阶段和链接阶段。
编译阶段对模版自身进行转换,把指令的模板添加到dom树上。在编译阶段会执行指令自定义的compile函数,可以对dom操作。
链接阶段对模板和数据进行绑定,执行preLink函数和postLink函数。编译时,先执行postLink,执行完子指令的preLink、postLink后,再执行postLink函数。
获取link字段:
1.当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段。
2.当compile字段不存在,link字段存在时,该link字段会在指令链接阶段访问。
link字段两种情况:
1.若为函数,这个函数会被认为是postLink函数。
2.若为对象,那么link.pre作为preLink函数,link.post作为postLink函数。
如上代码所示,定义compile字段,compile函数返回的对象的pre函数、post函数,分别是指令链接时执行的preLink函数、postLink函数。
如上代码,llink函数为指令编译时的postLink函数。
require
require字段表示引用的父指令或祖父指令的控制器的实例,该实例传入到指令link函数的第4个参数。
在require的参数值加上下面的某个前缀,确定查找控制器的行为:
-
没有前缀 指令会在自身提供的控制器中进行查找,如果找不到任何控制器,则会抛出一个error
-
? 若在当前指令中没有找到所需的控制器,则会将null传给link链接函数的第四个参数
-
^ 如果在当前的指令中没有找到所需的控制器,则会查找父元素的控制器,如果找不到任何控制器,则会抛出一个error
-
?^ 如果在当前和父元素中都没有找到控制器,则会将null传给link
如上代码,myChild指令通过require:'^myParent'指定使用myParent指令的控制器实例,并且作为实参传入myChild指令的link函数的第4个参数。在link函数内可访问myParent控制器实例。
[1]用angularJS开发下一代Web应用
[2]http://www.aliued.com/?p=3190
[3]https://segmentfault.com/a/1190000005851663