Angular JS - dynamically evaluate a directive

Question

Let's say I have a few directives: "drama", "comedy" and for some reason they have a lot of different properties, so it does not necessarily make sense to have a "movie" directive. Is there a way to dynamically evaluate a directive based on a scope variable? Something like this:

<{{movieType}} movie="{{movie}}"></{{movieType}}>

Where it would evaluate to something like this:

<comedy movie={{movie}}></comedy>

I'm new to Angular, so pardon for crazy ideas.

UPDATE: Actually just found a neat article regarding the exact same problem/solution: http://onehungrymind.com/angularjs-dynamic-templates/

Basically author has a single directive, but swaps out the templates based on the request:

var getTemplate = function(contentType) {
    var template = '';

    switch(contentType) {
        case 'image':
            template = imageTemplate;
            break;
        case 'video':
            template = videoTemplate;
            break;
        case 'notes':
            template = noteTemplate;
            break;
    }

    return template;
}

return {template: getTemplate(type)};

You cannot do that, you would need to construct the element compile and add it. — PSL
– PSL, Commented Jan 14, 2015 at 22:01
So should I then just create a 'movie' directive and have ng-switch there for different types of movies and nested directives for each category of movie? — Arman Bimatov
– Arman Bimatov, Commented Jan 14, 2015 at 22:08
What are the different options that can be passed in? They're all still movies, right? I would still explore the possibility of having a single movie directive and pass in all options, then you can ng-if or ng-show certain sections based on whether the input options are there. My guess is that they'll be similar enough that maintaining separate directives will be a maintenance nightmare. — Dan Caddigan
– Dan Caddigan, Commented Jan 14, 2015 at 22:40
OP, you can post an answer and accept it, if you like. Better to wait a few days, though, for others who might have other solutions. That is better than adding an answer to your Question, as you did. — New Alexandria
– New Alexandria, Commented Jan 14, 2015 at 22:57

Michael Kang · Accepted Answer · 2015-01-15 02:14:00Z

You could use a template function inside of a directive:

 app.directive('movie', function(){
      return {
           restrict:'A',
           template: function(element, attr){
                 ... define templates, i.e. <comedy />
                 var contentType = attr.movie;
                 switch(contentType) {
                       case 'comedy':
                             template = comedyTemplate;
                             break;
                       case 'drama':
                             template = dramaTemplate;
                             break;
                       case 'suspense':
                              template = suspenseTemplate;
                             break;
                    }
                return template;
           }
      }
 })

With this solution, no manual compilation is necessary.

Collectives™ on Stack Overflow

Angular JS - dynamically evaluate a directive

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related