AngularJS学习之directive自定义指令

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

AngularJS应用的模块中有很多方法可以使用，其中directive()这个方法是用来定义指令的：

angular.module('myApp', [])
    .directive('myDirective', function () {
    // 指令定义放在这里
});

directive() 方法可以接受两个参数：
1. name（字符串）
指令的名字，用来在视图中引用特定的指令。

注：对于名字，在编写指令时名字遵循驼峰准则，在使用时，用“-”连接。例如：定义myDirective，调用my-directive

2. factory_function （函数）
这个函数返回一个对象，其中定义了指令的全部行为。 $compile服务利用这个方法返回的对象，在DOM调用指令时来构造指令的行为。

angular.application('myApp', [])
    .directive('myDirective', function() {
    // 一个指令定义对象
    return {
        // 通过设置项来定义指令，在这里进行覆写
    };
});

指令的工厂函数 只会在编译器第一次匹配到 这个指令时 调用一次。

当AngularJS在DOM中遇到具名的指令时，会去匹配已经注册过的指令，并通过名字在注册过的对象中查找。此时，就开始了一个指令的生命周期，指令的生命周期开始于$compile方法并结束于link方法。

具有更高优先级的指令总是优先运行。

angular.module('myApp', [])

    .directive('myDirective', function() {

       return {

    restrict: String,    // 默认为A，指令在DOM中可以何种形式被声明，元素E、属性A、类名C、注释M

    priority: Number,  // 优先级

    terminal: Boolean, // 默认false，设为true，停止运行当前元素上比本指令优先级低的指令

         template: String or Template Function: function(tElement, tAttrs) (...},

         templateUrl: String, // 模板使用Ajax异步加载
         replace: Boolean or String, // 默认为false，设为true，引用的模板会替换原来的
         scope: Boolean or Object,
         transclude: Boolean,
         controller: String orfunction(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(...) { ... }

               }
     };

});