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

I've looked at this. It is a similar idea except that this one is based on <code>template</code> so everything is inline. — ritcoder
– ritcoder, Commented Sep 16, 2012 at 6:44
Possible duplicate of Angular.js directive dynamic templateURL — fracz
– fracz, Commented May 18, 2016 at 6:33
in AngularJS 1.5, you can use this solution: stackoverflow.com/a/41743424/1274852 — hkong
– hkong, Commented Jun 14, 2017 at 16:45

JasonS · Accepted Answer · 2013-05-13 09:16:47Z

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

answered May 13, 2013 at 9:16

JasonS

7,7736 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

J Castillo Over a year ago

updated link http://code.angularjs.org/1.1.4/docs/partials/guide/directive.html

fmquaglia Over a year ago

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)

armyofda12mnkeys Over a year ago

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): <div ng-repeat="subquestion in currentquestion.subquestions"> <question question="subquestion" template="{{subquestion.question_type}}" /> </div>

Ganaraj · Accepted Answer · 2012-09-17 08:08:21Z

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!

Indeed, one solution will be to use ngInclude. Will try it to solve the problem while looking for another way around it. Thanks.
For anyone searching, here is a cleaner way to do it: stackoverflow.com/a/23999356/656963

Collectives™ on Stack Overflow

Set templateUrl base on attribute in directive

2 Answers 2

3 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Linked

Related