小课堂【js-08】

课题：angular js自定义指令 directive 如何使用？为什么要使用封装的自定义指令？

分享人：吴胜

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

什么是指令

  指令就是DOM与逻辑行为的媒介，本质就是DOM绑定的独立逻辑行为函数。
  angular通过内置指令的方式实现了对html的拓展，同时也赋予了我们自定义指令的功能，让我们根据实际需求进行指令的定制。 自定义指令涉及到模板（template）、作用域（scope）、数据绑定和Dom操作等内容。

2.知识剖析

如何自定义指令

我们可以用directive 函数来添加自定义的指令。

App.directive("directiveName",function(){
return {
restrict: 'E',
replace: true,
template: '<div>。。。</div>',
scope: {
key:value
}
};
});

属性详解

directive( )模块解析(2个参数）

  • name （字符串） 指令的名字，用来在视图中引用特定的指令。
  • factory_function （函数） 这个函数返回一个对象，其中定义了指令的全部行为。

    • restrict（字符串|可选）

  • E(Element)：<runoob-directive></runoob-directive>
  • A(Attribute): <div runoob-directive></div>
  • C(CLASS)<div class="runoob-directive"></div>
  • M(注释)<!-- directive: runoob-directive -->

    • template和templateUrl（字符串或函数|可选)

  • 这两个只能同时存在其中一个。
    分别为：html文本的字符串;获取html文本链接的字符串
  • 如果为函数的时候则为：
    一个可以接受两个参数的函数，参数为 tElement 和 tAttrs ，并返回一个代表模板的字符串；
    一个可以接受两个参数的函数，参数为 tElement 和 tAttrs ，并返回一个外部HTML文件路径的字符串。

    • replace和transclude（布尔值|可选）

  • replace：是否用模板替换当前元素。
    true : 将指令标签替换成temple中定义的内容,页面上不会再有标签；
    false ：则append（追加）在当前元素上，即模板的内容包在标签内部。默认false。
  • transculde：是否使用ng-transculde来包含html中指令包含的原有的内容（不会被替换），默认false。

    • scope（布尔值|对象|可选）

  • scope：指令是被赋予允许访问父DOM元素对应作用域的能力.默认false;
  • 当该值为false时，将会直接访问父元素的作用域，此时指令中对作用域中元素的修改也会直接 作用在父元素的作用域中。 当该值为true时，则会继承父元素作用域，并创建一个新的作用域对象。
  • 如果为一个对象的时候，他会隔绝作用域。如空对象{}，此时指令的作用域将会完全独立于外界。

    • controller（字符串或函数）

  • 若该属性的值是字符串，则会以该字符串值去应用中查找该控制器。

    • controllerAs （字符串）

  • 用于设置控制器的别名

    • link(函数）：

    link:function(scope, element, attrs){
    //在这里操作DOM
    }

    3.常见问题

    如何使用自定义指令

    4.解决方案

    先看一串代码

    <body>
    <my-hello></my-hello>
    </body>
    <script type="text/javascript">
    var m1 = angular.module('myApp', []);
    m1.directive('myHello', function () {
    return {
    restrict: 'E',
    replace: true,
    template: '<div>hello angular</div>'
    };
    });
    </script>

    5.代码实战

    看demo1

    看demo2(scope.默认状态下）

    看demo3(scope.true的状态下）

    看demo4（scope.为独立域时的@单绑)

    还是看demo4（将@改为=）

    6.拓展思考

      指令就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性，并且它不只是单单如此， 你还可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive，我们可以封装很多公共指令， 比如分页指令、自动补全指令等等。然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。

    7.参考文献

    AngularJS1.x入门·常用指令以及自定义指令

    8.更多讨论

    1.什么时候用指令？

  • 使你的Html更具语义化，不需要深入研究代码和逻辑即可知道页面的大致逻辑。
  • 抽象一个自定义组件，在其他地方进行重用。

    • 2.为什么不推荐Angular和JQuery混合使用？

    在Angular中，操纵数据不是通过抓取和注入。一般通过数据绑定来实现，JQurey是抓取dom节后进行操作的。核心理念不同。 虽然在Angular里也能通过抓取然后注入数据，但是会出现很多不必要的问题和bug.

    3.为什么在directive里尽量不要用大写。

    因为在directive里，会将遇到的大写字母转换成 “-” + 转换的小写字母。

    鸣谢

    感谢大家观看

    BY : 吴胜