Angular: Variable template inside directive

Question

In my Angular template I use an attributive directive as follows:

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'
        }
    }]);

For including another template, my-template-two.html , on another page, I would like to use the same directive. I do not want to duplicate the directive. How can I pass the template as an variable?

HTML on another page:

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

My goal is that somehow I can tell my directive to render my-template-two.html when this HTML is called.

Answer 1

The templateUrl property value may be a function which takes two arguments tElement and tAttrs and returns a string value:

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'
    }
}]);

Usage

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

For more information, see AngularJS Comprehensive Directive API -- template