IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    AngularJS笔记:Directive

    axiu发表于 2016-03-04 23:16:51
    love 0

    接触AngularJS有一些时间了,但是对于其中一些知识点还是似懂非懂,比如关键的directive。之前用它搞了一下bootstrap里的自动完成功能(autocomplete),当时就感觉,嗯,这都是啥玩意。

    directive的作用

    一般来讲,directives是DOM元素上的标记,使AngularJS的HTML编译器为DOM绑定合适的动作,或者改变这个DOM。ngBind、ngModel、ngClass就是Angular的内置directives。当然也可以自定义directives。
    Angular是靠HTML标记来区分不同的directives的,当碰到ng-model的时候,就匹配到了ngModel这个内置的directives,调用内容即可。
    等等,为什么上面是ngModel,到这里变成了ng-model?这是因为他们指向的同一个东西,相同的还可以用x-ng-model、data-ng-model、ng:model、ng_model,效果都是一样的。另外,编译器还可以识别元素名、属性、class名或者注释。

    这样的标记都是可以正常使用的。

    那么,创建directives,实际就是创建一个方法,去识别自己定义的标记。

    如何写一个directive

    写之前,需要先理解一下各个关键字的方法,对关键字的默认值和声明方式,这里有个说明。

    总体看来,它的属性还是挺多的,而且像controller、scope、link、transclude都是一些看起来好像很简单,但是十分灵活的属性,比单纯的true/false的属性设置要来的复杂很多。下面是一些关键字的理解。

    关键字restrict

    restrict用于说明directive以何种方式声明(元素名、属性、class名或者注释)。比如,我有一个directive声明如下:

    .directive('myDirective', function() {
      ......
    });

    那么,我在HTML这边,就能直接用默认的my-directive这样的标记来写,当然上面列出的使用属性、class、注释等来写也是可以的。要使用这些,需在directive里使用restrict属性来区分。

    restrict共有4个值,可以混合使用,比如AE、ACM、AEC等等。

    ‘A’ – only matches attribute name
    ‘E’ – only matches element name
    ‘C’ – only matches class name
    ‘M’ – only matches comment

    那么,如果用这四种方式来声明,那么HTML的代码就是这样:

    'A':<span my-directive="exp"></span>
    'E':<my-directive></my-dir>
    'C':<span class="my-directive: exp;"></span>
    'M':<!-- directive: my-directive exp -->

    关键字template和templateUrl

    作为directive(指导),有时候需要指定一个template(模板)。这个模板可以直接写,也可以调用其他文件中定义的模板,这就是这两个关键字的用处。比如我定义了一个

    $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
      };

    就可以在directive里使用

    template: 'Name: {{customer.name}} Address: {{customer.address}}'

    来指定返回内容的格式。或者把这个template的内容写到一个html中,那就可以用templateUrl来指定这个模板地址。

    关键字scope

    scope这个字段,感觉是要创建一个局部的scope变量(isolate scope),不同的是,这个变量与父变量(copy from)可以单向绑定或者双向绑定。关于scope的说明,在这里。

    scope的声明方法,有4种:

    @ 或 @attr
    绑定这个DOM的attr属性。比如这个DOM有attr=”hello {{name}}”,这个name是全局的变量,directive里有scope: { localName:’@attr’ }那么绑定之后,对于name的改变,也会改变localName的值,
    = 或 =attr
    建立本地的双向绑定,DOM需要有attr=”name”,这个name是全局的变量,那么有scope: { localName:’=attr’ }之后,localName就和这个全局的name建立了双向绑定,任一方的更改会影响到对方的值。
    '<' 或 '< attr'
    单向绑定,只把attr包含的变量赋于本地scope变量,任何对于全局name的改变都会影响到localName,但是对于localName的改变不会影响到全局name的值。
    & 或 &attr
    可以在attr中指定表达式。

    关键字transclude

    transclude可以使这个directive可以包裹(wrap)其他元素。这里包裹的意思,就是将元素原来的内容移动到template里面的任意位置,这里有个例子。

    当这个关键字为false的时候,则会直接覆盖原来的内容。

    关键字controller、require、link

    一堆代码看下来,controller是使用频率比较高的一个属性,它用于在directive里定义一个暴露出来的方法,相当于给它伸出了一个API,可以直接供其他directive调用。当然作为调用,需要先引用一下源,require就是这个作用,在require里做了声明,才能调用到相应directive里的API。

    在调用时候,需要使用关键字link,例如

    link: function(scope, element, attrs, tabsCtrl) {tabsCtrl.xxController();}

    当require传入的是一个数组的时候['dep1','dep2'],则调用时使用tabsCtrl[0].xxController();这样的形式。

    关键字compile

    在link执行之前执行,用于动态修改template。

    转载请注明来源:AngularJS笔记:Directive
    本文链接地址:http://axiu.me/coding/angularjs-directive/


沪ICP备19023445号-2号
友情链接