Set templateUrl base on attribute in directive

angularjs directive
ritcoder picture ritcoder · Sep 16, 2012 · Viewed 15.4k times · Source

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

JasonS picture JasonS · May 13, 2013

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

Related questions

How to get evaluated attributes inside a custom directive

I'm trying to get an evaluated attribute from my custom directive, but I can't find the right way of doing it. I've created this jsFiddle to elaborate. <div ng-controller="MyCtrl"> <input my-directive value="123"> <input my-directive …

Read More
AngularJS - Create a directive that uses ng-model

I am trying to create a directive that would create an input field with the same ng-model as the element that creates the directive. Here's what I came up with so far: HTML <!doctype html> <html ng-app="…

Read More
Update Angular model after setting input value with jQuery

I have this simple scenario: Input element which value is changed by jQuery's val() method. I am trying to update the angular model with the value that jQuery set. I tried to write a simple directive, but it's not doing …

Read More