Set templateUrl base on attribute in directive

Question

I\'m working on a set of angular directives and I want to load the correct template based on the presence or value of an attribute.

Answer 1

One of the solutions for this is to use an ng-include inside the template file.

The first attribute inside of the template file will have something like :

<div ng-include = "getTemplate()">

</div>

In your directive code you would write something like :

scope : {direction : "="},
link : function(scope,element,attrs)
{
    scope.getTemplate = function(){
        if(scope.direction === "horizontal")
        {
            return "horizontal.html";
        }
        return "vertical.html";
    }
}

Hope this helps!

Answer 2

fyi this is now properly fixed in angular 1.1.4

you can pass a function to templateUrl. input parameters are element, attributes. and returns a string (the templateUrl you wish to use)

docs here: http://code.angularjs.org/1.1.4/docs/guide/directive