javascript - 重构 AngularJS 代码 - 提取函数

Question

我正在开发 AngularJS 应用程序。该应用程序严重依赖模块。我有一个模块，其中有一个 Controller 和一个指令。该模块如下所示:

angular.module('myApp.component', [])
    .controller('ShellCtrl', function ($scope, $location, $rootScope, $gustoAreas) {
        $scope.myVariable = false;
    })
    .directive('myDirective', function(){
        return {
            restrict: 'E',
            replace: true,
            template: function() {
                return '<div>Some HTML Goes Here</div>';
            },
            scope: true
        };
    })
;

我想提取保存模板的函数，这样我就可以按名称引用它。换句话说，我想做如下事情:

    .directive('myDirective', function(){
        return {
            restrict: 'E',
            replace: true,
            template: generateTemplate(),
            scope: true
        };
    })

当涉及到 JavaScript 语法时，我有点新手。我的问题是，我现在在哪里定义 generateTemplate？我怎么调用它？我是否需要使用 generateTemplate() 或 generateTemplate(带或不带括号)？

感谢您的帮助!

Answer 1

最简单的方法是像这样定义一个值:

angular.module('myApp.component', [])
    .value('generateTemplate', '<div>Some HTML Goes Here</div>');

或者像这样:

angular.module('myApp.component', [])
    .constant('generateTemplate', '<div>Some HTML Goes Here</div>');

然后只需将它注入(inject)您的指令或您需要它的任何地方:

.directive('myDirective', function(generalTemplate){
    return {
        restrict: 'E',
        replace: true,
        template: generalTemplate,
        scope: true
    };
})