关于angular 自定义directive - 郭靖丶_H5之家 - 中国HTML5教程资源分享第一站

关于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。

link中的第一个参数scope基本上就是你说的上面写的那个scope。

element简单说就是$('expander')

attrs是个map，内容是你这个directive上的所有属性，例如：你在页面上如果这样写了directive:

那attrs就是：
{
type: 'modal',
animation: 'fade'
}