AngularJS Directives:

We used directives in our first AngularJS application section. Here, we will learn directives in detail.

Directives are markers on a DOM element that tell AngularJS to attach a specified behavior to that DOM element or even transform the DOM element and its children. In short, it extends the HTML.

Most of the directives in AngularJS are starting with ng- where ng stands for Angular. AngularJS includes various built-in directives. In addition to this, you can create custom directives for your application.

The following table lists the important built-in AngularJS directives.

Directive	Description
ng-app	Auto bootstrap AngularJS application.
ng-init	Initializes AngularJS variables
ng-model	Binds HTML control's value to a property on the $scope object.
ng-controller	Attaches the controller of MVC to the view.
ng-bind	Replaces the value of HTML control with the value of specified AngularJS expression.
ng-repeat	Repeats HTML template once per each item in the specified collection.
ng-show	Display HTML element based on the value of the specified expression.
ng-readonly	Makes HTML element read-only based on the value of the specified expression.
ng-disabled	Sets the disable attribute on the HTML element if specified expression evaluates to true.
ng-if	Removes or recreates HTML element based on an expression.
ng-click	Specifies custom behavior when an element is clicked.

ng-app:

The ng-app directive initializes AngularJS and makes the specified element a root element of the application. Visit ng-app section for more information.

ng-init:

The ng-init directive can be used to initialize variables in AngularJS application.

The following example demonstrates ng-init directive that initializes variable of string, number, array, and object.

Example: ng-init


<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <div ng-app ng-init="greet='Hello World!'; amount= 100; myArr = [100, 200]; person = { firstName:'Steve', lastName :'Jobs'}">
        {{amount}}      <br />
        {{myArr[1]}}    <br />
        {{person.firstName}}
    </div>
</body>
</html>

Try it

Result:

100
200
Steve

In the above example, we initialized variables of string, number, array and object. These variables can be used anywhere in the DOM element hierarchy where it is declared e.g variables in the above example cannot be used out of <div> element.

ng-model:

The ng-model directive is used for two-way data binding in AngularJS. It binds <input>, <select> or <textarea> elements to a specified property on the $scope object. So, the value of the element will be the value of a property and vica-versa.

Example: ng-model


<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
    <input type="text" ng-model="name" />
    <div>
       Hello {{name}}
    </div>
</body>
</html>

Try it

The property set via ng-model can be accessed in a controller using $scope object. We will look at it in the next section.

Note : Variables initialized in ng-init are different from the properties defined using ng-model directive. The variables initialized in ng-init are not attached to $scope object whereas ng-model properties are attached to $scope object.

ng-bind:

The ng-bind directive binds the model property declared via $scope or ng-model directive or the result of an expression to the HTML element. It also updates an element if the value of an expression changes.

Example: ng-bind


<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="">
    <div>
        5 + 5 = <span ng-bind="5 + 5"></span> <br />

        Enter your name: <input type="text" ng-model="name" /><br />
        Hello <span ng-bind="name"></span>
    </div>
</body>
</html>

Try it

In the above example, ng-bind directive binds a result of an expression "5 + 5" to the <span>. The same way, it binds a value of a model property "name" to the <span>. The value of "name" property will be the value entered in a textbox.

ng-repeat:

The ng-repeat directive repeats HTML once per each item in the specified array collection.

Example:


<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
    <style>
        div {
            border: 1px solid green;
            width: 100%;
            height: 50px;
            display: block;
            margin-bottom: 10px;
            text-align:center;
            background-color:yellow;
        }
    </style>
</head>
<body ng-app="" ng-init="students=['Bill','Steve','Ram']">
    <ol>
        <li ng-repeat="name in students">
            {{name}}
        </li>
    </ol>
    <div ng-repeat="name in students">
        {{name}}
    </div>
</body>
</html>

Try it

In the above example, ng-repeat is used with students array. It creates <li> element for each item in the students array. Using the same way it repeats the <div> element.

ng-if:

The ng-if directive creates or removes an HTML element based on the Boolean value returned from the specified expression. If an expression returns true then it recreates an element otherwise removes an element from the HTML document.

ng-readonly:

The ng-readonly directive makes an HTML element read-only, based on the Boolean value returned from the specified expression. If an expression returns true then the element will become read-only, otherwise not.

ng-disabled:

The ng-disabled directive disables an HTML element, based on the Boolean value returned from the specified expression. If an expression returns true the element will be disabled, otherwise not.

The following example demonstrates ng-if, ng-readonly, and ng-disabled directives.

Example: ng-if, ng-readonly, ng-disabled


<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
    <style>
        div {
            width: 100%;
            height: 50px;
            display: block;
            margin: 15px 0 0 10px;
        }
    </style>
</head>
<body ng-app ng-init="checked=true" >
    Click Me: <input type="checkbox" ng-model="checked" /> <br />
    <div>
        New: <input ng-if="checked" type="text" />
    </div>
    <div>
        Read-only: <input ng-readonly="checked" type="text" value="This is read-only." />
    </div>
    <div>
        Disabled: <input ng-disabled="checked" type="text" value="This is disabled." />
    </div>
</body>
</html>

Try it

Directive Syntax:

AngularJS directives can be applied to DOM elements in many ways. It is not mandatory to use ng- syntax only.

Directive can start with x- or data-, for example ng-model directive can be written as data-ng-model or x-ng-model.

Also, the - in the directive can be replaced with : or _ or both. For example, ng-model can be written as ng_model or ng:model. It can also be a mix with data- or x-.

The following example demonstrates all the rules of a directive syntax.

Example: Directives syntax variation


<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
    Enter Name:  <input type="text" ng-model="name" /> <br />
    data-ng-bind: <span data-ng-bind="name"></span><br />
    data-ng:bind: <span data-ng:bind="name"></span><br />
    data:ng:bind: <span data:ng:bind="name"></span><br />
    x:ng:bind:    <span x:ng:bind="name"></span><br />
    ng:bind:      <span ng:bind="name"></span><br />
    x-ng-bind:    <span x-ng-bind="name"></span><br />
    x_ng_bind:    <span x_ng_bind="name"></span><br />
    ng_bind:      <span ng_bind="name"></span>
</body>
</html>

Try it

Visit AngularJS documentation to learn all the built-in directives.