指令是angluarjs的一个标志,是有别于其他框架的重要特征,因此学习angularjs,指令是必须认真而系统的学习的。
指令概述
指令是一种执行信号,发布了一个指令就要某种行为,在html中各种标签可以理解为指令,例如a标签,就是告诉浏览器要创建一个超链接。
就是一个指令的基本格式,指令使用时只需把指令的标签放在相应的位置就行
由于本团队使用了yeoman创建项目,因此创建指令可以使用yeoman的命令:
yo angular:directive
yoeman还有许多便捷的命令,这里不再细说
指令的常用属性
restrict
restrict属性指出的是指令在html中的使用方法,一共有"E","A","M","C"四种,对应标签(element),属性(attribute),类(class),注释(comment);可以多个同时使用,比如EAC,表示支持多种方式的使用
replace
这是指令的另一个属性,暂时没想到他应该在何种情况下使用,但是书上既然专门介绍了还是写一写,加深一下印象。
当设置replace为true时,模板中的内容替换指令为标记,这是书上的说法,我觉得说的不太明白,看图一下就懂了。
transclude
将视图模板(Template或TemplateUrl)替换到指定位置的视图(Restrict),
transclude与replace有一些相似之处,因此拿他们对比一下
My AngularJS App 原始的内容, 还会在这里。 原始的内容1, 还会在这里1。
简单明了。
(引用于该博客)
link
link就是一个函数
scope参数表示作用域,element表示指令中的元素,可以通过内置的jqLite调用,jqLite是一个压缩版的jQuery,attrs参数表示指令元素的属性集合,通过这个可以获取元素中的各种属性。
compaile
没搞太懂,又因为不常用就不细说了。
scope
scope是指令中一个很强大也很常用的属性
scope属性包含两种类型,一种是布尔值,另一种是json对象。scope是布尔值
scope属性自定义指令时默认值就是布尔类型的,初始值为false,指令中的作用域就是指令元素所在的作用域两者是相同的。如果scope为true,则表示独立创建,,当他的内容发生变化时并不会修改父作用域的内容。
scope是对象
如果scope是对象,那么父作用域与子作用域是完全独立的,不存在任何关联。如果要用父作用域的属性和方法需要在scope属性对应的json对象中添加绑定策略:
@ :把当前属性作为字符串传递,你还可以绑定来自外层scope的值,在属性值中插入双括号即可,此方法是单项绑定;= :与父scope中的属性进行双向绑定
& :传递来自父scope的函数,稍后再调用.
requeire和controller
当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性。
关于这个,看到一篇讲解很好的文章: