Angular指令学习

指令概览

指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径.

指令详解

指令的全部设置选项：

    angular.module('myApp', [])
                .directive('myDirective', function() {
                       return {
                       //指令在DOM中以何种方式声明 A:属性（默认） E：元素 C：类名 M：注释（少用）
                            restrict: String,
                       //在同一个元素上的指令调用顺序     
                           priority: Number,
                       //设为false时，同一元素上比该指令优先级低的指令不再执行
                         terminal: Boolean,
                      //HTML文本或模板函数   
                        template: String or Template Function:
                                        function(tElement, tAttrs) (...},
                      //HTML文件路径
                   templateUrl: String,
                      //默认false，true时取代元素
                       replace: Boolean or String,
                       //值为false时：我们创建的指令和父作用域共享一个model模型；值为true时： 创建新作用域初始化为父作用域 ，与父作用域不是同一个作用域；在指令已声明parentName的情况下，父域parentName变更，指令中parentName不会发生变化。在指令未声明parentName的情况下，父域的parentName变更，指令中parentName也会刷新;值为 {}时：  创建隔离作用域 ，需要使用绑定与外部交互。         
                       scope: Boolean or Object,
                     //true时将指令内部的元素嵌入到模板内ng-transclude处
                     transclude: Boolean,
                     //设置各个作用域scope
                      controller: String or function(scope, element, attrs,                              transclude,  otherInjectables) { ... },
                  controllerAs: String,
                   //指令获得外部其他指令的控制器
                     require: String,
                     //用link函数创建可以操作DOM的指令
                     link: function(scope, iElement, iAttrs) { ... },
                  // 返回一个对象或连接函数，
                              compile:                                    function(tElement, tAttrs, transclude) {
                                        return {
                                           pre: function(scope, iElement, iAttrs, controller) { ... },
                                         post: function(scope, iElement, iAttrs, controller) { ... }
                                       }
               };
});

向指令中传递数据（scope={}）

最简单的方法就是使用指令所属的控制器提供的已经存在的作用域。缺点：如果控制器被移除，或者控制器中有相同的属性名，我们都必须得修改代码。
AngularJS通常作法是创建一个新的子作用域或者隔离作用域来解决这个问题。通过将作用域内部的属性someProperty与DOM中的some-Property属性绑定来传值。

<div my-directive
some-property="something">
</div>
...
scope: {
someProperty: '@' //someProperty与some-Property绑定
}

<div my-directive
some-attr="something">
</div>
...
scope: {
someProperty: '@someAttr' //someProperty与some-attr绑定
}

绑定策略：@：单向，指令内部作用域可以使用外部作用域的变量
=：双向
&：绑定父作用域函数