AngularJS 中的指令实践开发指南(一)

下面是对于“AngularJS 中的指令实践开发指南(一)”的完整攻略。

什么是指令

指令是 AngularJS 中一种重要的概念，它可以在 HTML 模板中添加自定义的 HTML 标签、属性、类名和注释等方式来扩展 HTML 的功能。指令可以用来实现很多有用的功能，比如自定义表单控件、动态引入模板、实现分页等。

定义指令

在 AngularJS 中，我们可以通过 $compile 服务来定义一个指令，并指定相关的配置项，最终生成一个指令对象。下面是一个自定义指令的基本格式：

angular.module('myApp')
    .directive('myDirective', function() {
        return {
            // 配置项
        };
    });

其中，myDirective 是指令的名称，可以使用驼峰、短横线命名方式，但建议使用短横线命名方式，以便与 HTML 标签区分开来。指令的配置项包含了指令的相关信息，如指令所在的作用域、指令的优先级、指令的模板等。

指令编译与链接过程

在 AngularJS 中，指令编译与链接是一个复杂的过程，包含了多个阶段，需要理解其执行顺序和每个阶段的作用，才能充分发挥指令的功能。

指令编译阶段

在指令编译阶段，AngularJS 会扫描 DOM 树中的所有元素，并查找其中是否包含指令。如果找到了指令，就会根据指令的优先级排序，并将每个指令的编译器进行编译。

编译器的作用是将指令的模板转换为 DOM 元素，并返回一个链接函数。链接函数是用来链接指令和其相应的作用域的。

指令链接阶段

在指令链接阶段，AngularJS 会根据指令的优先级顺序，执行所有指令的链接函数。链接函数的作用是将指令的 scope 和 element 进行数据绑定。

在链接函数中，可以通过 element 参数来访问和修改指令对应的 DOM 元素，通过 scope 参数来访问和修改指令所在的作用域。

下面是一个简单的例子，用来说明指令编译与链接的过程：

angular.module('myApp')
    .directive('myDirective', function() {
        return {
            priority: 1000,
            restrict: 'E',
            compile: function(tElement, tAttrs) {
                // 编译函数
                console.log('编译函数被执行了');
                return function(scope, element, attrs) {
                    // 链接函数
                    console.log('链接函数被执行了');
                };
            }
        };
    });

在上面的例子中，指令的优先级被设置为了 1000。编译函数和链接函数都被定义在了指令对象中，分别输出了一条日志。在指令链接的过程中，AngularJS 会先执行编译函数，再执行链接函数。

总结

本文主要讲解了 AngularJS 中的指令开发实践指南，包括了指令的定义、指令编译与链接过程等内容。指令作为 AngularJS 中的重要概念，其基本语法、生命周期以及常用功能的实现是我们在实际项目中必不可少的知识点。需要注意的是，指令的编写需要结合具体的业务场景和代码规范，以便于实现代码的可维护性和可扩展性。

下面给出两个示例说明：

例子一：自定义表单控件

<my-input ng-model="myModel"></my-input>

angular.module('myApp')
    .directive('myInput', function() {
        return {
            restrict: 'E',
            require: 'ngModel',
            template: '<input type="text" ng-model="myModel">',
            link: function(scope, element, attrs, ngModel) {
                // 校验输入合法性
                ngModel.$validators['myValidator'] = function(modelValue, viewValue) {
                    var value = modelValue || viewValue;
                    return value && value.length >= 6 && value.length <= 12;
                };
            }
        };
    });

在上面的例子中，我们定义了一个自定义表单控件 my-input，它包含了一个输入框和一些校验逻辑。通过使用 ng-model 指令将输入框与所在作用域 myModel 进行双向数据绑定。在链接函数中，我们给 ngModel 添加了一个校验器，用来判断输入的文本是否符合指定的规范。

例子二：动态引入模板

<my-tab active-tab="tab01">
  <my-tab-panel tab-id="tab01">
    <h2>Tab 1</h2>
    <p>Tab 1 content.</p>
  </my-tab-panel>
  <my-tab-panel tab-id="tab02" template-url="tab-panel.html"></my-tab-panel> 
</my-tab>

angular.module('myApp')
    .directive('myTab', function() {
        return {
            restrict: 'E',
            transclude: true,
            scope: {
                activeTab: '@'
            },
            controller: function($scope) {
                $scope.tabs = [];

                this.addTab = function(tab) {
                    $scope.tabs.push(tab);

                    if ($scope.tabs.length === 1 || tab.tabId === $scope.activeTab) {
                        $scope.selectTab(tab);
                    }
                };

                $scope.selectTab = function(selectedTab) {
                    angular.forEach($scope.tabs, function(tab) {
                        if (tab.active && tab !== selectedTab) {
                            tab.active = false;
                        }

                        if (tab === selectedTab) {
                            tab.active = true;
                        }
                    });
                };  
            },
            link: function(scope, element, attrs) {
                element.on('click', '.tab', function() {
                    scope.$apply(function() {
                        scope.selectTab(scope.tabs[$(this).index()]);
                    });
                });
            },
            template: '<div class="my-tab">'
                + '<div class="tab-nav">'
                + '<div class="tab" ng-class="{active:tab.active}" ng-repeat="tab in tabs">{{tab.tabTitle}}</div>'
                + '</div>'
                + '<div class="tab-content" ng-transclude></div>'
                + '</div>'
        };
    })
    .directive('myTabPanel', function($http, $templateCache) {
        return {
            restrict: 'E',
            require: '^myTab',
            scope: {
                tabId: '@',
                template: '@'
            },
            link: function(scope, element, attrs, tabCtrl) {
                scope.tabTitle = attrs.tabTitle || 'Tab ' + tabCtrl.getTabCount();
                scope.active = attrs.tabId === tabCtrl.getActiveTab();
                tabCtrl.addTab(scope);

                if (scope.template) {
                    $http.get(scope.template, {cache: $templateCache}).success(function(tplContent) {
                        element.html(tplContent);
                    });
                }
            }
        };
    });

在上面的例子中，我们定义了一个动态引入模板的指令 my-tab-panel，它用来扩展 my-tab（选项卡）指令的功能，实现在选项卡中动态引入外部模板资源的功能。在模板中，我们使用了 ng-transclude 指令，将当前选项卡下的内容进行包裹并引入。

指令的实现是比较复杂的，包含了多个配置项、控制器函数和链接函数，需要结合上述指令编译链接过程的知识点来理解。在 my-tab 指令中，我们定义了 transclude 选项，用来承载选项卡面板中的内容，并通过 ng-repeat 指令来生成选项卡的列表。在 my-tab-panel 指令中，我们使用了 $http 服务来异步加载模板，并将加载后的内容挂载到选项卡面板的 DOM 元素中。