每天学习一点点,成功增加一大步

angularjs directive 参数说明

AngularJS zhanghui 708℃

今天在写 directive 时还是遇到坑,但这个坑是对directive 的参数使用说明没有仔细去了解,也没有做好笔记的缘故,所以做为程序员在遇到新的知识时要学会时常做笔记是个关键,不然你会在遇到坑满天飞的找。下面看下 directive 参数的使用说明吧。

1、name – 当前scope的名称,注册时可以使用默认值(不填)。

2、priority(优先级)- 当有多个directive定义在同一个DOM元素时,有时需要明确它们的执行顺序。这属性用于在directive的compile function调用之前进行排序。如果优先级相同,则执行顺序是不确定的(经初步试验,优先级高的先执行,同级时按照类似栈的“后绑定先执行”。另外,测试时有点不小心,在定义directive的时候,两次定义了一个相同名称的directive,但执行结果发现,两个compile或者link function都会执行)。

3、terminal(最后一组)- 如果设置为”true”,则表示当前的priority将会成为最后一组执行的directive。任何directive与当前的优先级相同的话,他们依然会执行,但顺序是不确定的(虽然顺序不确定,但基本上与priority的顺序一致。当前优先级执行完毕后,更低优先级的将不会再执行)。

4、scope – 该参数的作用是,隔离指令与所在控制器间的作用域、隔离指令与指令间的作用域。

可选参数,
(1)false – 表示继承父作用域(默认值)
(2)true – 表示继承父作用域,并创建自己的作用域(子作用域)
(3){} – 表示创建一个全新的隔离作用域并且存在不同的绑定策略。
策略一:使用@(@attr)来进行单向文本(字符串)绑定
策略二:使用=(=attr)进行双向绑定
策略三:使用&来调用父作用域中的函数

5、controller(控制器) – 构造函数。controller会在pre-linking步骤之前进行初始化,并允许其他directive通过指定名称的require进行共享(看下面的require属性)。这将允许directive之间相互沟通,增强相互之间的行为。controller默认注入了以下本地对象:

$scope – 与当前元素结合的scope
$element – 当前的元素
$attrs – 当前元素的属性对象
$transclude – 一个预先绑定到当前转置scope的转置linking function :function(cloneLinkingFn)。(A transclude linking function pre-bound to the correct transclusion scope)

6、require – 请求另外的controller,传入当前directive的linking function中。require需要传入一个directive controller的名称。如果找不到这个名称对应的controller,那么将会抛出一个error。名称可以加入以下前缀:

? – 不要抛出异常。这使这个依赖变为一个可选项。
^ – 允许查找父元素的controller

7、restrict – EACM的子集的字符串,它限制directive为指定的声明方式。如果省略的话,directive将仅仅允许通过属性声明:

E – 元素名称: <my-directive></my-directive>
A – 属性名: <div my-directive=”exp”></div>
C – class名: <div class=”my-directive:exp;”></div>
M – 注释 : <!– directive: my-directive exp –>

8、template – 如果 replace 为true,则将模版内容替换当前的HTML元素,并将原来元素的属性、class一并迁移;如果为false,则将模版元素当作当前元素的子元素处理。

9、templateUrl – 与 template 基本一致,但模版通过指定的 url 进行加载。因为模版加载是异步的,所以compilation、linking都会暂停,等待加载完毕后再执行。

10、replace – 如果设置为true,那么模版将会替换当前元素,而不是作为子元素添加到当前元素中。(注:为true时,模版必须有一个根节点)

11、transclude – 编译元素的内容,使它能够被directive所用。需要在模版中配合ngTransclude使用(引用)。transclusion的优点是linking function能够得到一个预先与当前scope绑定的transclusion function。

12、compile – 编译函数选项,该编译函数选项,在这里我们可以在指令和实时数据被放到DOM中之前进行DOM操作,
比如我们可以在这里进行添加或者删除节点的DOM的操作。
所以编译函数是负责对模板的DOM进行转换,并且仅仅只会运行一次。

 //compile函数的语法
compile:function compile(tElement,tAttrs,transclude){
      return{
        pre:function preLink(scope,iElement,iAttrs,controller){},
        post:function postLink(scope,iElement,iAttrs,controller){}
      }
    }

对于我们编写的大部分的指令来说,并不需要对模板进行转换,所以大部分情况只要编写link函数就可以了。

preLink 函数会在编译阶段之后,指令链接到子元素之前执行
postLink 会在指令链接到子元素之后执行
这意味着,为了不破坏绑定过程,如果你需要修改 DOM 结构,你应该在 postLink 函数中来做这件事。

13、link – 链接函数选项,链接函数负责将作用域和DOM进行链接。

 //link链接函数
link:function postLink(scope,iElement,iAttrs){}

若指令中定义有require选项,则link函数会有第四个参数,代表控制器或者所依赖的指令的控制器

转载请注明:隨習筆記 » angularjs directive 参数说明