AngularJS Custom Directives

To extend the functionality of HTML with new attributes, AngularJS uses Directives and Custom Directives. Having a set of in-built directives, AngularJS offers functionality to your applications. You can also have your own set of directives; Custom Directives.

The standard directives

Starting with a prefix 'ng-', AngularJS has a few directives as follows.

  • ng-app
  • ng-init
  • ng-model
  • ng-repeat

The ng-app directive basically kick starts an AngularJS application while the ng-init initializes the data of the application. The ng-model directive performs data binding and the ng-repeat repeats an element in the HTML. Let us have a closer look at them looking at the example below.

In AngularJS, the term refers to a software design pattern as well. In this pattern, the components are not hard coded within, but are given dependencies. This makes the dependencies to be configurable and does not need the component to locate the dependency.

Let us have a look at each of these individually.


During the configuration phase, this is used to pass values to the controller. It is nothing but a simple javascript object.

<student name = "Mithilesh"></student><br/>
<student name = "Piyush"></student>

The ng-app directive

This directive not only defines the root element of an AngularJS application but also auto-bootstraps or automatically initializes the AngularJS application when the webpage is loaded.

The ng-init directive

This 'ng-init' directive basically defines the initial values of an AngularJS application. However, you may not use this directive generally since you have access to a controller or a module instead.

The ng-model directive

It basically binds the HTML control's values to the application data. It can also be used to provide:

  • Type validation for application data.
  • Status for application data.
  • CSS classes for the HTML elements.
  • Binding the HTML elements and forms.

Custom Directives

There are also used in AngularJS for the same function as the standard directives and are also defined using the word directive. A custom directive is something that replaces an element for which it is activated. Using the compile() method of custom directives, the application finds the matching elements and performs a one-time activity during the bootstrap stage. You can create custom directives for the following type of elements which are supported by AngularJS:

  • Element directives: When a matching element is found, this directive is activated.
  • Attribute directives: When a matching attribute is found, this directive is activated.
  • CSS: When a matching CSS style is found, this directive is activated.
  • Comment: When a matching comment is found, this directive is activated.