AngularJS自定义指令

使用.directive()方法来注册一个新指令
传入两个参数，第一个参数传入一个字符串，作为指令的名字；第二个参数是一个函数，该函数返回一个对象，返回的对象中包含了用来定义和配置指令所需的方法和属性。

基本使用

创建一个自定义元素my-directive

// index.html
<my-directive></my-directive>

// app.js
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: '<dir>Nari</dir>'
    };
});

创建的指令在html文件中不仅可以用作元素，还可以作为属性，类或者注释使用

<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
<!--directive:my-directive-->

restrict设置以哪种方式调用：元素（E） 、属性（A） 、类（C）、注释（M）

向指令传递数据 scope： {}

template可接受变量的形式：template: '<dir>{{ varName }}</dir>'
在html文件中，可以给指令添加var-name属性，该参数会成为指令内部作用域的属性

双向绑定的问题：如果是在事件处理函数（event handler）中改变了绑定model，需要手动触发digest，因为这是发生在angular范围之外，所以scope无法知道model的变化，如下：

element.on('click', function() {
$scope.modal = newModal;
$scope.$apply();
})

// index.html
<div my-directive var-name="Nari"></div>

// app.js
app.directive('myDirective', function() {
    return {
        restrict: 'A',
        replace: true,
        // 使用隔离作用域，创建指令自己的$scope属性
        scope: {    
            varName: '@'，
            varName: '='，
            varName: '&'
        },
        template: '<dir>{{ varName }}</dir>'
    };
});

绑定策略
'@'： 表示AngularJS将DOM中var-name属性的值复制给新作用域对象中的varName属性，var-name属性改变，作用域对象中的varName属性会自动更新
'='： 表示在指令的作用域和其他model作用域建立了一个双向数据绑定
'&'： 表示在指令的作用域和其他model作用域进行绑定，调用其函数

绑定函数的传参方式有两种：

// 第一种：指令中调用函数时传入一个对象，对象的属性名是html中对应的参数名
// index.html
<div my-directive callback-fun="doSomething(argName)"></div>

// app.js
app.directive('myDirective', function() {
    return {
        restrict: 'A',
        scope: { 
            callbackFun: '&'
        },
        link: function(scope, ele, attrs) {
            // 传入一个对象
            scope.callbackFun({argName: value})
        }
    };
});

// 第二种：html中指定函数名，在指令中调用函数时传参
// index.html
<div my-directive callback-fun="doSomething"></div>

// app.js
app.directive('myDirective', function() {
    return {
        restrict: 'A',
        scope: { 
            callbackFun: '&'
        },
        link: function(scope, ele, attrs) {
            // scope.callbackFun()相当于获取该函数引用，然后正常调用函数
            scope.callbackFun()(arg1, arg2, ...)
        }
    };
});

模板 template templateUrl

定义指令模板，
template指定模板HTML字符串
templateUrl可以指定模板路径或者一个函数，函数可以接受两个参数tElement和tAttrs，并返回一个代表模板的字符串

引入外部指令 require

查找该值对应的指令，将查找到的指令的控制器注入到当前指令中
寻找策略：
？策略——寻找指令名称，如果没有找到，link函数第4个参数为null；如果没有？，则报错。
**^ **策略——在自身指令寻找指令名称的同时，向上父元素寻找；如果没有^，则仅在自身寻找。

指令控制器 controller controllerAs

可定义一个匿名函数或传入一个控制器名
指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为,但link函数只能在当前内部指令中定义行为,且无法在指令间复用。

controller: function($scope, $element, $attrs){
    // 可以注入一些服务，$scope就是当前作用域，$element当前指令对应的元素，$attrs当前元素的属性组成的对象
}

优先级控制 terminal

可以被设置为true或false，设为true时会使AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行