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

angularjs directive 参数说明

AngularJS zhanghui 1684℃

今天在写 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 参数说明

喜欢 (0)