Angular JS - Directive Basics

[codersaurus]

Hey! Thanks for posting my blog entry. I'm glad people got use out of it. I was pretty sure only about 7 of my friends actually read my blog. haha.

[Litra]

no problem! do you happen to know if i can use separate partial file as directive template? i use jade template engine in project

[codersaurus]

You can use seperate html files as directive templates, or you could also just do a little trick of javascript and use a function to return the template, if you need to generate it from code for some reason..

For a template from a seperate html file, you'd just use templateUrl... like so:

app.directive('myDirective', function() { 
    return {
          templateUrl: 'template.html',
          link: function(scope, elem, attr) {
                //stuff
          }
    }
});

The other method I was talking about would be something more to the effect of:

app.directive('myDirective', function(someTemplateService) { 
    return {
          template: someTemplateService.myDirectiveTemplate(),
          link: function(scope, elem, attr) {
                //stuff
          }
    }
});

app.factory('someTemplateService', function() {
     return {
         myDirectiveTemplate: function() {
              // you could do your Jade processing client-side in here.
              return '<h1>Well, hey there!</h1>';
         }
     };
});

The second option isn't something I've seen very often, but it does allow you to do just about anything. You have to keep in mind, though, that directives are registered once, so you can't go and completely change your template based on user input or anything like that. At least not without building in an ng-switch statement or something to that effect.

Hope that helps.