angular指令

作者: Look_a_Look | 来源:发表于2017-08-09 12:57 被阅读23次
    app.directive("myDirective", function() {
         return{
              name:"myDirective",
              restrict:EA,
              ·······
         }
    })
    

    Note:此处myDir指令名称如果包含大写(驼峰),则HTML中应该使用短横线分割

    指令参数:
    restrict 指令可以以哪些方式被使用,可以同时定义多种方式。
    E 元素方式 、A 属性方式 、C 类方式 、M 注释方式
    template 模板内容,HTML代码
    templateUrl 从指定地址获取HTML模板文件,获取方式是异步请求
    replace 是否使用模板内容替换掉整个节点,true替换整个节点,默认false,保留节点,替换节点里的内容。
    priority 这个值设置指令的权重,默认是0。当一个节点中有多个指令存在时,就按着权限从大到小的顺序依次执行它们的compile函数。相同权重顺序不定。
    terminal 是否以当前指令的权重为结束界限。如果这值设置为true,则节点中权重小于当前指令的其它指令不会被执行。相同权重的会执行。
    name
    指令的 controller 的名字,以方便在 require 参数中引用。
    require
    要引用的其它指令 conroller 的名字,?name 忽略不存在的错误,^name 在父级查找。
    scope
    绑定策略,将指令内部的scope和指令节点所在scope进行数据关联
    false:默认值,使用节点的所在controller的scope
    true:继承创建一个新的 scope ,节点的所在controller的scope的子scope
    {}:不继承,创建一个新的隔离 scope 。
    @attr: 【 值引用节点属性,字符串, 值传递 (单向绑定)】
    =attr: 【把节点属性值引用成scope属性值attr,引用传递(双向绑定)】
    &attr: 【把节点属性值包装成函数,这个函数以节点所在的scope为上下文】
    transclude
    默认是 false,还可以 true和'element'。通常用来创建可复用的组件
    如果指令中包含其他指令或者其他内容,要想保留这些内容,需要设置transclude为true
    指令模板代码中同时需要有 ng-transclude 标签
    ng-transclude 告诉Angular把指令标签内部的内容保留并嵌入在模板的什么地方
    ****compile****
    基本的定义函数。
    function compile(tElement, tAttrs, transclude) { ... }
    controller
    为指令定义一个 controller ,在compile之后,link之前执行
    可以是一个字符串,angular会以字符串的值来查找注册在应用中的控制器构造函数
    也可以是一个函数:function controller($scope, $element, $attrs, $transclude) { ... }
    link
    大多数时候我们不需要单独定义它。只有compile未定义时link才有可能定义
    function link(scope, iElement, iAttrs, controller) { ... }

    相关文章

      网友评论

        本文标题:angular指令

        本文链接:https://www.haomeiwen.com/subject/qrzopttx.html