AngularJS - 自定义指令

angular.module('app', []).directive('myDirective', function() {
    return {
    restrict:String,                
    priority:Number,
    terminal:Boolean,
    template:String or Template Function,
    templateUrl:String or Template Function,
    replace:Boolean or String,
    transclude:Boolean,
    scope:Boolean or Object,
    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(...) { ... }
        }
    };
 });

内部参数

• restrict
  选项restrict可以设置成以下方式：
  • ‘A’ - 仅匹配属性名<div my-directive="expression"></div>
  • ‘E’ - 仅匹配元素名<my-directive></my-directive>
  • ‘AE’ - 既匹配属性名又匹配元素名
  • ‘C’ - 类名<div class="my-directive:expression;"></div>
  • ‘M’ - 注释<--directive:my-directive expression-->
• priority: Number，指令执行优先级
• template: String，HTML模板
• templateUrl:String，HTML指定路径
• replace: Boolean，模板是否替换原有元素

对外参数——scope
scope参数是可选的，默认值为false，可选true、对象{}

false：共享父域
true：继承父域，且新建独立作用域
对象{}：不继承父域，且新建独立作用域

scope: {
         nodes: '=',
         default: '=defaultData',
         imageTip: '@',
         validate: '&'
       },

• @（or @Attr）绑定策略——本地作用域属性，使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量。（单向引用父域对象）
  @ 是单向绑定本地作用域，记得加上{{}}
<my-directive image-tip="{{graphic.imageFormTip}}"></my-directive>

• = （or =Attr）绑定策略——双向绑定：通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变。（双向引用父域对象）

• & （or &Attr）绑定策略——通过&符号可以对父级作用域进行绑定，以便在其中运行函数。（调用父域函数）

对外参数——require
cope是指令与外界作用域通讯的桥梁，而require是指令与指令之间通讯的桥梁。这个参数最大的作用在于，当要开发单指令无法完成，需要一些组合型指令的控件或功能，例如日期控件，通过require参数，指令可以获得外部其他指令的控制器，从而达到交换数据、事件分发的目的。
require: String or Array
String值为引入指令名称，并且有两个寻找指令策略符号‘？’与‘^’；Array数组则为多个外部指令名称
require: '^teacher'
require: ['?^teacher', 'studentA'],

• ？策略——寻找指令名称，如果没有找到，link函数第4个参数为null；如果没有？，则报错
• ^ 策略——在自身指令寻找指令名称的同时，向上父元素寻找；如果没有^，则仅在自身寻找

行为参数——link与controller
link与controller都是描述指令行为的参数，但它们是要描述的行为是完全不同的类型

controller语法 controller：String or Function
controller: 指令的作用域的行为

link语法 link：String Or Function
link名称是链接函数

Angular在刚从HTTP Response接收静态素材之初，会首先去分析母页HTML中有哪些原生指令或自定义指令，然后再去加载指令的template模板HTML，而template模板中又去加载自己的指令模板，如此类推，直到Angular找到了所有的指令及模板，形成模板树，并返回模板函数，提供给下一阶段进行数据绑定。

简单的说就是:

• 渲染模板,形成DOM树
• link链接函数
• 数据绑定
  所以link就是描述指令元素操作行为。

    element.bind("click", function () {
        console.log("绑定点击事件");
    });

    element.append("<p>增加段落块</p>");

    //设置样式
    element.css("background-color", "yellow");

    //不推荐，在link中赋予scope行为
    scope.hello = function () {
        console.log("hello");
    };
}

define [
  'wm/app'
  'wm/config'
], (app, config) ->
  app.registerDirective('checkboxTree', [
    '$rootScope'
    '$q'
    ($rootScope, $q) ->
      return (
        restrict: 'AE'
        scope:
          nodes: '='
          change: '&'
        template: '<div class="angular-tree">
                  </div>
                  '
        link: (scope, elem, attrs) ->
          vm = scope
          init = ->
          vm.$watch 'searchKey', ->
          	// 事件监控

		  init()
          vm
      )
    ]
  )