title: Angular JS - dynamically evaluate a directive
body: <p>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:</p>
  
  <pre><code>&lt;{{movieType}} movie="{{movie}}"&gt;&lt;/{{movieType}}&gt;
  </code></pre>
  
  <p>Where it would evaluate to something like this:</p>
  
  <pre><code>&lt;comedy movie={{movie}}&gt;&lt;/comedy&gt;
  </code></pre>
  
  <p>I'm new to Angular, so pardon for crazy ideas.</p>
  
  <p><strong>UPDATE:</strong> Actually just found a neat article regarding the exact same problem/solution: <a href="http://onehungrymind.com/angularjs-dynamic-templates/" rel="nofollow">http://onehungrymind.com/angularjs-dynamic-templates/</a></p>
  
  <p>Basically author has a single directive, but swaps out the templates based on the request:</p>
  
  <pre><code>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)};
  </code></pre>