关于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
对象,而是会重新创建一个。templateUrl
link
directive
被angular 编译后,执行该方法link
中的第一个参数scope
基本上就是你说的上面写的那个scope
。
element
简单说就是$('expander')
attrs
是个map,内容是你这个directive
上的所有属性,例如:你在页面上如果这样写了directive
:
<expander type="modal" animation="fade"></expander>
那attrs
就是:
{
type: 'modal',
animation: 'fade'
}