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

对于模板共享，您可以将常用模板代码提取到＆＃39;模板指令中，即仅定义没有行为的模板的指令。这样，您可以在其他指令的模板中重用这些模板指令。

为了共享常见的JavaScript行为，推荐的两种方法是通过Angular服务（服务/工厂）或使用指令控制器的指令。

对于后者，请参阅http://docs.angularjs.org/guide/directive上的Creating Directives that Communicate部分，了解如何实施此功能。

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

1 个答案: