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.

<my-form horizontal> </my-form>
<my-form vertical> </my-form>

If horizontal, templateUrl should be /partials/horizontal-form and If vertical, templateUrl should be /partials/vertical-form

I'm interested in the templateUrl because I can't use template since the html depends on the attributes. In the compile.pre function, the html has already been loaded.

If there is another way of achieving this, I'm open to it since I'm now starting with angular and the more info the better.

Thanks

Answer 1

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

Answer 2

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!