zoukankan      html  css  js  c++  java
  • angular Directive 指令详解

    一、定义 

     指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能。

    指令的基本结构如下:

    angular.module('myApp', [])
    .directive('myDirective', function() {
    return {
    restrict: String,
    priority: Number,
    terminal: Boolean,
    template: String or Template Function:
    function(tElement, tAttrs) (...},
    templateUrl: String,
    replace: Boolean or String,
    scope: Boolean or Object,
    transclude: Boolean,
    controller: String or
    function(scope, element, attrs, transclude, otherInjectables) { ... },
    controllerAs: String,
    require: String,
    link: function(scope, iElement, iAttrs) { ... },
    compile: // 返回一个对象或连接函数,如下所示:
    function(tElement, tAttrs, transclude) {
    return {
    pre: function(scope, iElement, iAttrs, controller) { ... },
    post: function(scope, iElement, iAttrs, controller) { ... }
    }
    // 或者
    return function postLink(...) { ... }
        }
      };
    });

    1.restrict.(限制、约束)

      restrict是一个可选参数,可选值为 E、A、C、M,可多选,可不选,默认为A。

    A:attribute 属性(默认值-default value  推荐使用),即属性的形式来使用指令,例如:<div my-directive="expression"></div>。

    E:element 元素。使用方式 :<my-directive></my-directive>。

    C:class 类名。使用方式:<div class="my-directive:expression;"></div>

    M:comment 注释 ,这个貌似没啥用 使用方式<--directive:my-directive expression-->

    属性指令良好的兼容性使我们大多采用 A 方式来使用指令。

    2.priority.(优先级) 可以设置为一个数值,默认为0,在同一元素上优先级高的指令会被优先调用。同一元素同样优先级的指令顺序调用。不常用

    3.terminal(终端,终点--boolean布尔型)值为true或者false; 不常用

      这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令
      优先级相同的指令还是会被执行(when the value is true)。

    4.template(模板、样本 the value can be string or a function    暂时的--temporary ps:还能学单词。。)不常用。

      如果模板字符串中含有多个DOM元素,或者只由一个单独的文本节点构成,那它必须被包
      含在一个父元素内。换句话说,必须存在一个根DOM元素。下面是2个例子:

    template: '
    <div> <-- single root element -->
    <a href="http://google.com">Click me</a>
    <h1>When using two elements, wrap them in a parent element</h1>
    </div>

     含有多个元素的文本必须用反斜杠包围.如果只有一个元素则不用,如:

    template:'<a href="www.google.com">Click me</a>'

     如果值为function。则形式如下:function(tElement, tAttrs) (...},返回一个代表模板的字符串。

    5.templateUrl(the value can be string or a function)--常用

      一般要引入html文本,我们都是在外面定义好一个文本文件,然后用 url(string) 的形式引入。如

    templateUrl:“view/modal/example.html”;

    function 形式与template,不再赘述。

    6先到这里,吃饭后继续。

    
    
  • 相关阅读:
    VC++ 之 文件操作
    Delphi7 API(5) 消息篇:WM_LBUTTONDOWN、WM_LBUTTONUP、WM_MOUSEMOVE
    VC++ 之 输入/输出类库(二)
    VB 访问控制面板
    Delphi7 API(4) 消息_重绘
    Lisp简明教程
    一次快速排序错误引发的思考(2)
    一次快速排序错误引发的思考(1)
    Common Lisp编译程序的小技巧
    暴风影音5免去广告的小技巧
  • 原文地址:https://www.cnblogs.com/xydy123/p/4334559.html
Copyright © 2011-2022 走看看