angularjs 指令（directive）详解(2)

原文地址

上一篇咱们说到了transclude，那么，咱们如今继续讲解以后的内容。

9.scope

可选参数，默认值为false。取值：

false - 在这个directive里不会建立新的scope，而是继承父级的scope。

true - 为这个directive建立一个新的scope，并继承它的父级的scope。

{} - 对象，在这个directive中建立一个新的带隔离的scope，这能够防止读取或者修改父级scope的数据，建立可重用的组件全靠这个了。

     对象里的值是如何与父级的scope绑定呢？经过如下属性：

   (1).@或@attr - 若是没有指定attr名称(即只写@)，attr与directive中定义的名称同样。只能是string类型，并单向绑定到父级的scope，即继承与父级scope，可是改变directive中相应scope的值的时候，父级scope不会发生变化。

   (2).=或=attr - 若是没有指定attr名称(即只写=)，attr与directive中定义的名称同样。 跟父级的scope双向绑定，即改变其中一个的值，另外一个也会跟着变化。

   (3).&或&attr - 若是没有指定attr名称(即只写&)，attr与directive中定义的名称同样。 当咱们想在directive中的子级scope中调用父级的函数时，该怎么办呢？‘&’就是用来解决这个问题的。它提供了一种在父级范围中执行一个function的途径，并能够经过localFn（{args1:'',args2:''}）来使父级函数获取相应的数据。

 

10.controller

可选参数。controller会在pre-linking步骤以前进行初始化，而且能够经过其余的directive访问（详情请看require相关说明）。controller是能够被注入的，而且默认注入了如下的行为：

$scope -当前directive元素的scope

 $element -当前directive的元素

 $attrs - 当前元素的属性组成的对象

 $transclude - 在controller里实现transclude ，下面是参数解释

  function([scope], cloneLinkingFn, futureParentElement, slotName):

 （1）.scope: （可选参数）当前directive元素的scope

 （2）.cloneLinkingFn: （可选参数） 克隆当前引用的内容

 （3）.futureParentElement:（可选参数）

 （4）.slotName: （可选参数）transclude的名称。

 

11.require

可选参数。请求其余的directive的controller，传入当前directive的linking function中。require须要传入一个directive controller的名称。若是找不到这个名称对应的controller，那么将会抛出一个error。名称能够加入如下前缀：

（无前缀） - 找到当前元素上所需的控制器。
? -尝试找到所须要的控制器。
^ -经过搜索元素及其父级找到所需的控制器。若是没有找到引起错误。
^^ -经过搜索元素的父级找到所需的控制器。若是没有找到引起错误。
?^ -尝试经过搜索元素及其父级找到所须要的控制器。
?^^ -尝试经过搜索元素的父级找到所须要的控制器。

12.controllerAs

可选参数。设置你的控制器的别名

 

 

13.compile

compile编译函数选项

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函数就能够了。

tips：preLink函数会在编译阶段以后，指令连接到子元素以前执行

        相似的，postLink会在指令连接到子元素以后执行

        这意味着，为了避免破坏绑定过程，若是你须要修改DOM结构，你应该在postLink函数中来作这件事。

 

14.link连接函数选项

连接函数负责将做用域和DOM进行连接。

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

若指令中定义有require选项，则link函数会有第四个参数，表明控制器或者所依赖的指令的控制器（上面require选项例子已有例子）