AngularJS-自定义指令

AngularJS是一个非常流行的前端框架，它的指令（directives）是由AngularJS中最为重要的组成部分之一。指令让程序员可以根据自己的需求创建出自定义标签、属性、CSS类，从而实现了无数的功能。在实际的开发中，自定义指令的应用也非常广泛。

何为自定义指令

AngularJS的指令有内置指令和自定义指令两种。内置指令如ngApp、ngModel、ngBind等，可以实现非常丰富的功能。而自定义指令就是开发者根据自己的需求所创建的指令。自定义指令实际上就是一个函数，函数名称可以自定义，但是函数的入参名称必须是 $scope、$element、$attrs、$timeout、$transclude 等默认参数。

angular.module('myApp',[])
    .directive('myDirective',function(){
        return {
            restrict: 'EA',
            template:'<span>这是自定义指令的内容</span>',
            replace: true
        }
    })

在这段代码中，我们定义了一个名为 myDirective 的指令，这个指令是用来创建一个 span 元素并将其内容设置为 “这是自定义指令的内容”。其中 restrict 属性指定指令的使用方式，这里的 “EA” 代表 Element 和 Attribute，也可以写成 “E” 或者 “A” 单独使用。

自定义指令的应用场景

1. 在模板中创建新的 html 标签，丰富页面表现；
2. 将常用的代码封装成指令，以减少代码量；
3. 重复使用的 UI 组件，例如弹出层、选项卡等；
4. 与第三方库的集成，例如使用 jQuery 等插件。

自定义指令的使用要点

1. restrict 属性非常重要，用来规定指令的使用方式。
2. 当指令需要使用外部变量时，需要在 link 函数中显式注入依赖。
3. 如果指令需要操作 DOM 元素，需要使用 $timeout 函数进行封装，以保证 DOM 操作不会影响 AngularJS 的脏检查。
4. 使用 transclude 选项可以将指令中的 HTML 插入到使用指令的 HTML 中。
5. 当指令需要使用其他指令的服务时，需要使用 require 属性来声明依赖。

示例

angular.module('myApp',[])
    .directive('myDirective',function(){
        return {
            restrict: 'EA',
            template:'<input type="text" ng-model="name"><br>' +
                     '<span ng-show="name">Hello, {{name}}!</span>',
            scope: {},
            link: function(scope, element, attrs, ctrl){
                scope.name = "World";
            }
        }
    });

在这个例子中，我们创建了一个名为 myDirective 的指令，它用来接收用户输入的名字并显示出来。在 template 属性中，我们创建了一个输入框和一个显示控件，同时使用了 AngularJS 的变量插值功能，并绑定了输入框的 ng-model 属性。

在 link 函数中，我们对 $scope.name 进行了初始化，最终的显示效果是显示 “Hello, World!”。当用户在输入框中输入名字时，Hello, World! 的内容会发生改变。因为这个指令使用了独立的 scope，因此不会影响到外部的变量。

参考资料

1. AngularJS官方文档 - https://docs.angularjs.org/guide/directive
2. AngularJS Directives — Tips and Tricks - https://medium.com/@mattlag/es6-angularjs-directives-tips-and-tricks-17efa43e39d8
3. Making Sense of AngularJS Directives - https://leanpub.com/making-sense-of-angularjs-directives