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

我正在开发AngularJS应用。该应用程序严重依赖模块。我有一个包含控制器和指令的模块。该模块如下所示：

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（带或不带括号）？

感谢您的任何帮助！

最佳答案

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

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

或像这样：

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

然后将其注入您的指令或您需要的其他任何地方：

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