关于angular 自定义directive
关于angular 自定义directive的小结
首先我们创建一个名为"expander"的自定义directive指令:
angular.module("myApp",[]).directive("expander",function(){ return{ //directive的一些属性(键值对形式)如下:
/*
restrict:'EA',
replace:true,
transclude:true,
scope:{...},
template:....,
templateURL:....,
link:function(scope,element,attrs){
}
*/
}
});
主要有如下几个属性:
-
restrict
E: 表示该directive
仅能以element方式使用,即:<my-dialog></my-dialog>
A: 表示该directive
仅能以attribute方式使用,即:<div my-dialog></div>
EA: 表示该directive
既能以element方式使用,也能以attribute方式使用 -
transclude
是否嵌入,true/false。 scope
当你写上该属性时,就表示这个directive
不会从它的controller
里继承$scope
对象,而是会重新创建一个。- tempalte
替换自定义directive的真实HTML代码 templateUrl
替换自定义directive的模板路径link
可以简单理解为,当directive
被angular 编译后,执行该方法
link
中的第一个参数scope
基本上就是你说的上面写的那个scope
。
element
简单说就是$('expander')
attrs
是个map,内容是你这个directive
上的所有属性,例如:你在页面上如果这样写了directive
:
<expander type="modal" animation="fade"></expander>
那attrs
就是:
{
type: 'modal',
animation: 'fade'
}