angularjs指令

angularjs最大的有点除了双向数据绑定、组件化，带给开发者灵活性的就是指令了。

1. 指令的作用

指令，就是让开发者集中精力根据业务功能将html模板与数据模型进行绑定的手段，进而在平常的页面开发中脱离对业务逻辑逻辑的关注，集中精力实现页面展示；
指令是DOM与逻辑行为的媒介，本质就是DOM绑定的独立逻辑行为函数；其返回值为一个对象;

2. 指令的参数：

先来看指令的定义：

angular.module('app',[])
.directive('myDir',function(){
 return {
        restrict:String,
        priority:Number,
        terminal:Boolean,
        template:String || Template Function:function(tElement,tAttrs){...},
        templateUrl:String,
        replace:Boolean || String,
        scope:Boolean || Object,
        transclude:Boolean,
        controller:String || function(scope,element,attrs,transclude,otherInjectables){...},
        controllerAs:String,
        require:String || Array,
        link:function(scope,iElement,iAttrs,ctrl){...},
        compile:function(tElement,tAttrs.transclude){
            return {
                pre:function(scope,iElement,iAttrs,controller){...},
                post:function(scope,iElement,iAttrs,controller){...}
            }
            return function postLink(...){...}
        }
    }
})

3. 指令参数的解析

从上面的定义可以看出，一个复杂的angularJS指令的属性是非常多的一共13个，但实际使用中并不会全部进行配置，而且有些参数不会同时进行配置，如：template和templateUrl
以上参数从功能上可分为三类：

• 内部参数：描述指令或DOM自身特性的内部参数：
  1. restrict：定义指令模式，E(元素)<my-dir></my-dir>、A(属性，默认值)<div my-dir=expression></div>、C(类名)<div class='my-dir'></div>、M(注释)<--directive:my-dir expression-->
  2. priority:指令执行的优先级；
  3. template:指令链接的DOM模板；
  4. templateUrl:指令链接的DOM模板路径
  5. replace:指令链接模板是否替换原有元素；
• 对外参数：链接指令外界、其他指令、外部控制器的对外参数
  1. scope:定义指令与外界作用域进行通讯的方式；①false:共享父域，默认；②true:继承父域，创建独立作用域；③{}:不继承父域，且创建独立作用域；
  2. require:定义指令与外界指令进行通讯的方式;当单指令无法实现需求时，可加载外部依赖指令;①string类型：两种指令策略符号?、^;②Array数组为多个外部指令名称；此参数与link的第四个参数ctrl保持类型一致；
• 自身行为参数：描述指令本身的行为/方法属性参数
  1. controller:指令的控制器，定义内部作用域的行为，亦即指令内部作用域的行为方法；
  2. link:链接函数，在模板树形成之后，数据绑定之前，对模板树进行DOM操作的方法；在controller之后执行；

参考文档：AngularJS指令参数详解