AngularJS之指令

指令directive概述

指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jQuery一样效果具有交互性。不同于jQuery，Angular设计核心思想是通过数据与模板的绑定，摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。

区别

AngularJS与JQuery最大的区别在哪里？表现在数据双向绑定，实质就是DOM的操作形式不一样。

JQuery通过选择器找到DOM元素，再赋予元素的行为；
而AngularJS则是，将指令与DOM绑定在一起，再扩展指令的行为。

所以AngularJS开发最理想的结果就是，在页面HTML与CSS的设计时，设计工程师只需要关注指令的使用；而在背后的逻辑开发上，架构工程师则是不需要知道如何操作DOM，只需要关注指令背后的行为要如何实现就行；测试工程师也可以开发针对指令的单元测试。

指令就是DOM与逻辑行为的媒介，本质就是DOM绑定的独立逻辑行为函数。

AngularJS内置的命令

screenshot

指令难点在于参数

先来看看都有哪些：

angular.module('app', [])
.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(...) { ... }
        }
    };
 });

简单的例子

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://www.orchome.com/user/js/angular-1.5.8.min.js"></script>
    </head>
    <body ng-app="MyModule">
        <hello></hello>
        <div hello></div>
        <div class="hello"></div>
        <!-- directive:hello -->
    </body>
    <script>
        var myModule = angular.module("MyModule", []);
        myModule.directive("hello", function() {
        return {
            restrict: 'AEMC',
            template: '<div>Hi everyone!</div>',
            replace: true
        }
    });
    </script>
</html>

页面结果：

Hi everyone!
Hi everyone!
Hi everyone!
Hi everyone!

可以看到，输出了4遍相同的内容，但是在html的写法有4种

restrict：String
- E（元素）<my-directive></my-directive>
- A（属性，默认值）<div my-directive="expression"></div>
- C（类名<div class="my-directive:expression;"></div>
- M（注释）<--directive:my-directive expression-->
priority: Number，指令执行优先级
template: String，指令链接DOM模板，例如<h1>{{head}}</h1>
templateUrl:String，DOM模板路径
replace: Boolean，指令链接模板是否替换原有元素。

AngularJS默认是使用A这种方式，也就是<div my-directive="expression"></div>这种。

推荐使用哪种方式呢？

推荐使用A和E。C的class这种会带来混淆，一般做来做样式的，M这种方式属于注解。