首页 > 代码库 > angular 指令
angular 指令
1.restrict的取值有四种
- A 用于元素的 Attribute,这是默认值 <div hello></div>
- E 用于元素的名称 <hello></hello>
- C 用于 CSS 中的 class <div class="hello"></div>
- M 作为注释来使用 <!--directive: hello -->
2.replace,替换,就是将模板的内容追加到元素中,默认为false,如果设为true,就是模板中的内容将会替换元素中的内容
3.transclusion,定义模版的元素如何处理问题,例如,在使用指令时候,指令中包含了内容,这些内容是否直接替换成模板,还是嵌入模板中,需要说明,是否需要嵌入,还要说明嵌入到哪里
例如:transclusion:true
template:‘<h3>hello,alhh,<span ng-transclude></span></h3>‘
4.template和templateUrl,模板内容,就是要插入的HTML代码,只能选择其一,如果代码量较多,可考虑后者
5.link函数,包括三个参数 scope、element、attrs
①.scope参数,如果没有为指令定义scope属性,那么它代表的就是父controller的scope。
②.element参数,就是指令的jQLite(jQuery的子集,angular.element()就会返回一个jQLite对象)包装DOM元素。如果你在引入AngularJS之前引入了jQuery,那么这个元素就是jQuery元素,而不是jQLite元素。由于这个元素已经被jQuery/jQLite包装了,所以我们就在进行DOM操作的时候就不需要再使用 $()来进行包装。
③.attrs参数,它包含了该指令所在元素的属性的标准化参数对象。
6.scope,用来定义scope的范围。默认是false,还有true和{},一般用{}。当为{}的时候,表示创建一个隔离的scope,不会继承父scope的属性。但是在有的时候我们也要需要访问父scope里的属性或者方法, 提供了三种方法同隔离之外的地方交互
@:只能绑定字符串,所以一些简单的继承父scope的属性使用@
=:需要实现双向数据绑定的时候使用
&:提供一种方式执行一个表达式在父scope的上下文中,即使用于将父scope中的函数绑定在指令的scope中
angular 指令