O'Reilly logo

AngularJS by Example by Chandermani

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Anatomy of a directive

To create a directive, we use the directive function on the Module API. The signature looks like this:

directive(name, directiveFactory);

The name attribute signifies the name and the directiveFactory function is a factory function that returns an object containing the directive configuration. The directive configuration object is a complex beast and will require most of our attention. This is where we define the complete directive configuration and behavior.

This is how the complete directive definition object returned by the factory function looks:

  function directiveFactory (injectables) {
      var directiveDefinitionObject = {
          priority: 0,
          template: 'html', //use either template or templateUrl
          templateUrl: 'directive.html',

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required