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参数,它包含了该指令所在元素的属性的标准化参数对象。

compile函数,其实在大多数的情况下,我们只需要使用 link 函数。这是因为大部分的指令只需要考虑注册事件监听、监视模型、以及更新DOM等,这些都可以在 link 函数中完成。 但是对于像 ng-repeat 之类的指令,需要克隆和重复 DOM 元素多次,在 link 函数执行之前由 compile 函数来完成。

6.scope,用来定义scope的范围。默认是false,还有true和{},一般用{}。当为{}的时候,表示创建一个隔离的scope,不会继承父scope的属性。但是在有的时候我们也要需要访问父scope里的属性或者方法, 提供了三种方法同隔离之外的地方交互

@:只能绑定字符串,所以一些简单的继承父scope的属性使用@

=:需要实现双向数据绑定的时候使用

&:提供一种方式执行一个表达式在父scope的上下文中,即使用于将父scope中的函数绑定在指令的scope中

原文地址:https://www.cnblogs.com/alhh/p/6933718.html