好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

angular 自定义指令

代码模板:

var myModule = angular.module("myModule",[]);

myModule.directive('directiveName',function(){

  return{

    restrict:string,

    template:string,

    templateUrl:string,

            priority:number,

            replace:boolean,

    transclude:boolean,

    scope:bollean 或 object,

            controller: string 或 function,

            require: string 或 array,

    link:function(scope,element,attrs){

    },

            compile:function(element,attrs,transclude){

    }

            ...

  }

});

restrict

指定了如何在模模板中使用自定义的指令。取值可为E、A、C、M中的一个,或任意组合。如:'A','EA','EAC','EACM'。若对象中没有指定restrict属性,默认为'A'。

E:表示元素的名称

A:表示元素的属性

C:表示CSS中的class

M:表示注释

template、templateUrl

template:指令的内联模板。

templateUrl:指令的内联模板的url。

priority

数字,可选参数,致命指令的优先级,若在单个DOM元素上有多个指令,则优先级高的先执行。

当然,设置指令的优先级不太常用,但是比较特殊的例子是,内置指令ng-repeat的优先级为1000,而ng-init的优先级为 450。

replace

若取值为true,模板(template)替换指令所在的元素;若取值为fasle,把模板(template)放在指令所在元素的内部。默认情况下,值为false。

把template的值设为'<span>good!</span>'

transclude

布尔值,默认值为false

这个配置选项可以让我们提取包含在指令那个元素里面的内容,再将它放置在指令模板的特定位置。当我们开启transclude之后,我们就可以使用ng-transclude来指明应该在什么地方放置transclude的内容

template值设置为'<span ng-transclude></span><span>good!</span>'

scope

(1)false

自定义指令的scope对象就是指令所在的scope对象(即作用域)。

(2)true

自定义指令新建了一个scope对象,并继承外层的scope。

(3)object

自定义指令创建了一个scope对象,不继承外层的scope,新建的scope是独立的,与外层scope隔离。

自定义指令scope需要通信时,可以通过传递属性名映射的方式把父scope中指定的属性传递给这个独立的scope。

绑定策略:

a.@

单向文本绑定,传递一个字符串值,传递的数据类型只能是字符串。当父作用域属性改变时,隔离的scope中的属性值随着变化;当隔离的scope中的属性值改变时,父作用域的属性值不随着变化。

b.=

双向绑定,传递父作用域的一个属性,传递的数据类型可以是字符串、数组、对象等。当父作用域属性改变时,隔离的scope中的属性值随着变化;当隔离的scope中的属性值改变时,父作用域的属性值也随着变化。

c.&

执行父作用域中的函数。

如下代码所示:

compile和link函数

指令主要分为两个阶段:编译阶段和链接阶段。

编译阶段对模版自身进行转换,把指令的模板添加到dom树上。在编译阶段会执行指令自定义的compile函数,可以对dom操作。

链接阶段对模板和数据进行绑定,执行preLink函数和postLink函数。编译时,先执行postLink,执行完子指令的preLink、postLink后,再执行postLink函数。

获取link字段:

1.当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段。

2.当compile字段不存在,link字段存在时,该link字段会在指令链接阶段访问。

link字段两种情况:

1.若为函数,这个函数会被认为是postLink函数。

2.若为对象,那么link.pre作为preLink函数,link.post作为postLink函数。

 

如上代码所示,定义compile字段,compile函数返回的对象的pre函数、post函数,分别是指令链接时执行的preLink函数、postLink函数。

 

 如上代码,llink函数为指令编译时的postLink函数。

require

require字段表示引用的父指令或祖父指令的控制器的实例,该实例传入到指令link函数的第4个参数。

在require的参数值加上下面的某个前缀,确定查找控制器的行为:

没有前缀 指令会在自身提供的控制器中进行查找,如果找不到任何控制器,则会抛出一个error

? 若在当前指令中没有找到所需的控制器,则会将null传给link链接函数的第四个参数

^ 如果在当前的指令中没有找到所需的控制器,则会查找父元素的控制器,如果找不到任何控制器,则会抛出一个error

?^ 如果在当前和父元素中都没有找到控制器,则会将null传给link

 

 如上代码,myChild指令通过require:'^myParent'指定使用myParent指令的控制器实例,并且作为实参传入myChild指令的link函数的第4个参数。在link函数内可访问myParent控制器实例。

 

 

 

 

[1]用angularJS开发下一代Web应用

[2]http://www.aliued.com/?p=3190

[3]https://segmentfault.com/a/1190000005851663

查看更多关于angular 自定义指令的详细内容...

  阅读:40次