Angular Directives - Overview
Javascript Angular

Angular Directives - Overview

3 min read
Simon Coope
Simon Coope

Table of Contents

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).


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:

    .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


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


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.


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


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


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


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 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...


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:

    	<!-- START: Transcluded Content -->
        <span>{{ testValue1 }}</span>
        <!-- END: Transcluded Content -->


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.


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.


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.


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!