15

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

ritcoder
  • 3,274
  • 10
  • 42
  • 62
  • I've looked at [this](http://stackoverflow.com/questions/10629238/angularjs-customizing-the-template-within-a-directive). It is a similar idea except that this one is based on template so everything is inline. – ritcoder Sep 16 '12 at 06:44
  • Possible duplicate of [Angular.js directive dynamic templateURL](http://stackoverflow.com/questions/21835471/angular-js-directive-dynamic-templateurl) – fracz May 18 '16 at 06:33
  • in AngularJS 1.5, you can use this solution: https://stackoverflow.com/a/41743424/1274852 – hkong Jun 14 '17 at 16:45

2 Answers2

22

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

JasonS
  • 7,443
  • 5
  • 41
  • 61
  • 2
    updated link [http://code.angularjs.org/1.1.4/docs/partials/guide/directive.html](http://code.angularjs.org/1.1.4/docs/partials/guide/directive.html) – J Castillo Jun 25 '13 at 00:27
  • 1
    Although @jaysun pointed the proper way to do it (a function to set templateUrl value) in some scenarios (e.g. sub-rendering within the template already loaded, the approach pointed by ganaraj may be practical too) – fmquaglia Jan 31 '14 at 14:05
  • 2
    I don't think it compiles the attributes though... like you can't pass this hoping template attr compiles to 'RADIO' for example (but you could literally put template="RADIO" and it would work, but obviously not useable for dynamic questions in my example):
    – armyofda12mnkeys Oct 18 '15 at 20:52
11

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!

ganaraj
  • 26,841
  • 6
  • 63
  • 59
  • Indeed, one solution will be to use ngInclude. Will try it to solve the problem while looking for another way around it. Thanks. – ritcoder Sep 19 '12 at 12:33
  • 1
    For anyone searching, here is a cleaner way to do it: http://stackoverflow.com/a/23999356/656963 – David Sep 23 '15 at 13:20