Dynamically switching template of a directive

Question

Is possible (I'm guessing it is) to dynamically change template of a directive, depending on certain factors?

So, I see how theoretically it's possible - you can put all different templates into the $templateCache beforehand, and retrieve the one you need during directive compilation

something like:

restrict:'E'
scope:
    data:'='
    template:'='
link:(scope, elem, attrs)->
    html = $templateCache.get(scope.template)
    tElement.html(html)

However real question is, would be the right thing to do so? Will that badly affects performance? If for example directive used as a cell in a big grid?

Answer 1

Switching between Directives is a bad practice.

The Why:

Lets assume you have a DropDown Menu ( <select> ), and you Have set couple of directives that each one is linked to its option (by ngModel).

When the App runs,

You will start with initial directive set by the default value of the <select> property, and when you would try to replace that value, you would have to "Delete" the directive from the DOM and "Write" use a new one.

By now this should sound to you that it sound like jQuery.

The What Else should I do:

Well, you almost answered it for your self: use ng-switch.

ng-switch by AngularJS

Notes:

1) Switching between directive templates is possible (in the exact way you mentioned it, you set couple of templates on the background, and you load the one that fits the most according to the user interaction), but it sounds like you are about to type serious Spaghetti Code Which will be very difficult to maintain.

2) Performance: I can't tell if that would affect seriously on the performance of the app, but it will definitely be much harder to maintain.

3) If ng-switch doesn't fit there, You should look at this problem in a different angle.

EDIT:

Yes, It's common to do so: And I've done that in couple of projects.

You have to pass a function to your template property of the new .directive. Example:

templateUrl: function (elem, attrs){
  return attrs["template"] == "table" ? "tableTemplate.html" : "listTemplate.html";
}

What this means : is that you have to add a so called "Support" attribute to your new directive. In this case I called it template.

It would look like so : <div new-directive="data" template="table"></div>