Angular：指令内部的变量模板

Question

在我的Angular模板中，我使用如下的定语指令：

HTML：

<div id="my-template-one" my-template-directive></div>

JS：

// ...
.directive('myTemplateDirective', ['myconfig', function (myconfig) {
        return {
            templateUrl: myconfig.TEMPLATE_PATH + 'my-template-one.html',
            controller: function ($scope, $rootScope) {
                // code
            },
            controllerAs: 'dir'
        }
    }]);

为了在另一个页面上包含另一个模板my-template-two.html ，我想使用相同的指令。 我不想重复该指令。 如何将模板作为变量传递？

另一页上的HTML：

<div id="my-template-two" my-template-directive></div>

我的目标是以某种方式可以告诉我的指令在调用此HTML时呈现my-template-two.html 。

Answer 1

templateUrl属性值可以是一个带有两个参数tElement和tAttrs并返回字符串值的函数：

app.directive('myTemplateDirective', ['myconfig', function (myconfig) {
    return {
        templateUrl: function (tElem, tAttrs) {
            var template = "my-template-one.html";
            if (tAttrs.use) {
                template = tAttrs.use;
            };             
            return myconfig.TEMPLATE_PATH + template;
        },
        controller: function ($scope, $rootScope) {
            // code
        },
        controllerAs: 'dir'
    }
}]);

用法

<div my-template-directive use="my-template-two.html"> </div>

有关更多信息，请参见AngularJS综合指令API-模板