Defining the Directive View Template

You can include AngularJS template code to build view components that will be displayed in the HTML element that contains the directive. You can add template code directly by using the template property, as in this example:

Click here to view code image

directive('myDirective', function() {
  return {
    template: 'Name: {{name}} Score: {{score}}'
  };
});

You can specify a root element in the custom template—but only one element. This element acts as the root element for any child element defined in the AngularJS template to be placed inside. Also, if you are using the transclude flag, the element should include ngTransclude. For example:

Click here to view code image

directive('myDirective', function() {
  return {
    transclude: true,
    template: '<div ng-transclude></div>'
  };
});

You can also use the templateUrl property to specify a URL of an AngularJS template located on the webserver, as in this example:

Click here to view code image

directive('myDirective', function() {
  return {
    templateUrl: '/myDirective.html'
  };
});

The template URL can contain any standard AngularJS template code. You can therefore make your directives as simple or as complex as you need them to be.