javascript - 一种跨 AngularJS 指令共享通用模板 HTML 和 JavaScript 行为的方法？

Question

我正在构建一个表单生成器 AngularJS 应用程序，并且我有以下 AngularJS 指令代表用于编辑 TextField 的 UI:

angular.module('myApp.directives').directive('textFormFieldElement', ['$timeout', function($timeout) {
    'use strict';

    return {
        restrict: 'A',
        scope: {
            element: '='
        },
        template: '<div class="form-element text-form-field">' +
                  '    <span class="identifier">TF</span>' +
                  '    <strong class="heading" ng-bind="headingText()"></strong>' +
                  '    <div class="editor">' +
                  '        <div class="form-group">' +
                  '            <label>Enter the field name:</label>' +
                  '            <input ng-model="element.fieldName" type="text" class="form-control" />' +
                  '        </div>' +
                  '        <div class="form-group">' +
                  '            <label>Enter a label for the field:</label>' +
                  '            <input ng-model="element.label" type="text" class="form-control" />' +
                  '        </div>' +
                  '        <div class="form-group">' +
                  '            <label>Enter a note for the field:</label>' +
                  '            <input ng-model="element.note" type="text" class="form-control" />' +
                  '        </div>' +
                  '        <div class="checkbox">' +
                  '            <label>' +
                  '                <input ng-model="element.required" type="checkbox" /> Required' +
                  '            </label>' +
                  '        </div>' +
                  '    </div>' +
                  '</div>',

        link: function(scope, element, attributes) {
            scope.element.fieldName = scope.element.fieldName || 'TextField';

            // Expand the editor when creating new elements, and focus on the first field once rendered.
            if (!scope.element._id) {
                $timeout(function() {
                    element.find('.editor').addClass('expanded');
                    element.find('.editor').find('input:first').select();
                }, 10);
            }

            scope.headingText = function() {
                if (scope.element.fieldName.length && scope.element.fieldName.length > 0) {
                    return scope.element.fieldName;
                }

                return 'TextField';
            };
        }
    };
}]);

我还有其他控件，例如 PhoneField、EmailField 和 RadioButtonListField。

这些指令通常在其模板中具有通用的 HTML 以及通用的 JavaScript 行为。我想要一种跨指令共享它的方法，而不会污染全局命名空间。

有哪些方法可以实现这一点？

Answer 1

对于模板共享，您可以将通用模板代码提取到“模板指令”中，即只定义没有行为的模板的指令。这样您就可以在其他指令的模板中重复使用这些模板指令。

为了共享常见的 JavaScript 行为，推荐的两种方法是通过 Angular 服务(服务/工厂)或在指令的情况下使用指令 Controller 。

对于后者，请参阅 http://docs.angularjs.org/guide/directive 处的创建通信指令部分关于如何实现这一点。