SJCNet

SJCNet is the home of architect/developer/techie, Simon Coope.

Angular Directives - Overview

I've been wanting a reference to all the properties/options that are available on directives, so I thought I'd write one as a reference for myself (and others if anyone else finds it useful).

Directives

To begin with, let's The Angular website defines directives as:

"Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behaviour to that DOM element or even transform the DOM element and it's children"

The available properties/options on a directive are as follows:

angular.module('app')
    .directive("exampleDirective", function () {
        return {
            restrict: String,
            priority: Number,
            terminal: Boolean,
            template: String or Function,
            templateUrl: String,
            replace: Boolean or String,
            scope: Boolean or Object,
            transclude: Boolean,
            controller: String or Function,
            require: String,
            link: Function,
            compile: Function
        }
    };
);

Restrict

This options tells ANgular which format the directive will be declared in the DOM. The options are:

  • E - Element
  • A - Attribute (default)
  • C - Class
  • M - Comment

Priority

This indicates the priority in which directives are run. For example, the ngRepeat directive has this setting at 1000 so that it always gets invoked before other directives on the same element.

Terminal

This option is used to tell Angular to stop invoking any further directives on an element with a lower priority.

Template

Template can either be set to a string or a function. This is used to provide a HTML view for the directive.

TemplateUrl

This option is used to provide a path to an HTML file or a function that returns the path to an HTML file.

Replace

This option indicates how the directive is rendered. If it's set to false, this means that the directives template will be appended as a child of the element on which the directive is decorated. If it's set to true the directive HTML will replace the element on which the directive is decorated.

Scope

Scope can be set to true, or an object. When scope is set to true a new object scope is created that inherits from the parent's scope.

If, on the other hand, we set the scope to an empty object we create an isolated scope, which means we create a scope that's independent of the parent scope.

Directive scope is a large topic, and so I'd recommend looking into this more for yourself...

Transclude

Transclusion allows us to pass in an entire template (HTML) and it's scope to a directive. Do this means we can pass in HTML into the directive which can be used when rendering the final template.

For example,

{{ testValue1 }}

Controller

This option takes a string or a function. When using a string the string entered is used to find match to a controller. When using a function, the function takes the place of the controller function.

Require

This option is used to inject the controller of another directive as the fourth parameter in the linking function. For example, setting require to 'ngModel' will pass the ngModelController object into the linking function.

The link function is used to manipulate the DOM, with access to the scope, attributes and element on which the directive is applied. The link function is used to create listeners on the DOM or the model. These listeners keep the view and the model in sync at all times.

Compile

We use the compile function to manipulate the DOM before the directive is run against the decorated element.

I'd recommend further research to fully understand the relationship between compile Vs link functions. This is outside the scope of this question overview of directive options.

Conclusion

This has been a really quick overview of the options available on directives. Any questions or areas I've not fully explained or that I've misunderstood please let me know!

Author image
About Simon Coope
Sydney, Australia Website
Experienced developer/consultant. Loves all things development, technology, gadgets, football and running.