app.directive("myDirective", function() {
return{
name:"myDirective",
restrict:EA,
·······
}
})
Note:此处myDir指令名称如果包含大写(驼峰),则HTML中应该使用短横线分割
指令参数:
restrict 指令可以以哪些方式被使用,可以同时定义多种方式。
E 元素方式 、A 属性方式 、C 类方式 、M 注释方式
template 模板内容,HTML代码
templateUrl 从指定地址获取HTML模板文件,获取方式是异步请求
replace 是否使用模板内容替换掉整个节点,true替换整个节点,默认false,保留节点,替换节点里的内容。
priority 这个值设置指令的权重,默认是0。当一个节点中有多个指令存在时,就按着权限从大到小的顺序依次执行它们的compile函数。相同权重顺序不定。
terminal 是否以当前指令的权重为结束界限。如果这值设置为true,则节点中权重小于当前指令的其它指令不会被执行。相同权重的会执行。
name
指令的 controller 的名字,以方便在 require 参数中引用。
require
要引用的其它指令 conroller 的名字,?name 忽略不存在的错误,^name 在父级查找。
scope
绑定策略,将指令内部的scope和指令节点所在scope进行数据关联
false:默认值,使用节点的所在controller的scope
true:继承创建一个新的 scope ,节点的所在controller的scope的子scope
{}:不继承,创建一个新的隔离 scope 。
@attr: 【 值引用节点属性,字符串, 值传递 (单向绑定)】
=attr: 【把节点属性值引用成scope属性值attr,引用传递(双向绑定)】
&attr: 【把节点属性值包装成函数,这个函数以节点所在的scope为上下文】
transclude
默认是 false,还可以 true和'element'。通常用来创建可复用的组件
如果指令中包含其他指令或者其他内容,要想保留这些内容,需要设置transclude为true
指令模板代码中同时需要有 ng-transclude 标签
ng-transclude 告诉Angular把指令标签内部的内容保留并嵌入在模板的什么地方
****compile****
基本的定义函数。
function compile(tElement, tAttrs, transclude) { ... }
controller
为指令定义一个 controller ,在compile之后,link之前执行
可以是一个字符串,angular会以字符串的值来查找注册在应用中的控制器构造函数
也可以是一个函数:function controller($scope, $element, $attrs, $transclude) { ... }
link
大多数时候我们不需要单独定义它。只有compile未定义时link才有可能定义
function link(scope, iElement, iAttrs, controller) { ... }
网友评论