title: AngularJS Dynamc templates
body: <p>another angularJS question!
  Im still trying to learn directives, and one thing that im looking at doing it to display a different template based on a scope item that is passed in. Ive googled and found multiple ways to achieve this used both </p>
  
  <pre><code>link: 
  </code></pre>
  
  <p>and </p>
  
  <pre><code>controller: 
  </code></pre>
  
  <p>and have seen reviews suggesting that this can not / should not be done using the </p>
  
  <pre><code>templateURL :
  </code></pre>
  
  <p>im a little confused as this is the way i have achieved it..</p>
  
  <p>i have 2 templates :-</p>
  
  <pre><code>&lt;div&gt;here is my name :- {{name}}, and im template 1&lt;/div&gt;
  &lt;div&gt;here is my name :- {{name}}, and im template 2&lt;/div&gt;
  </code></pre>
  
  <p>Here is the directive</p>
  
  <pre><code>   .directive('createDirective', function () {
  
        return {
            scope: {name:'&amp;myName'},
            restrict: 'E',
            templateUrl: function (tElement, tAttrs) {
  
                switch (tAttrs.template)
                {
                    case '1': 
                        return 'app/event/showname.html'
                        break;
                    case '2' :
                        return 'app/event/showname2.html'
                        break;
                }
                console.log('template')
            },
         }
    });
  </code></pre>
  
  <p>and the directive in the HTML</p>
  
  <pre><code>&lt;create-directive my-name="bob" template="1"&gt;&lt;/create-directive&gt;
  </code></pre>
  
  <p>this seems to be working, and a much simpler solution.. however,  whats the reason why i shouldnt be using this method?</p>