• 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

  • 相关阅读:
    java怎么导入一个项目到eclipse
    JDK安装与环境变量配置(链接by网络)
    配置安装ecplise跑项目
    电脑缺少**.dll文件
    Microsoft-Office-Professional-Plus-2007
    win7如何恢复以前的ie版本
    maven安装及maven项目导入流程(网络链接)
    LoadRunner录制Web协议的脚本 (by网络)
    spring中jdbc.properties用法
    linux 安装 mysql
  • 原文地址:https://www.cnblogs.com/fe-huahai/p/5616750.html
Copyright © 2020-2023  润新知