AngularJS Directives

Sunil Sharma
Last Updated: May 13, 2022

Introduction


AngularJS is a dynamic web app structure framework. It allows you to utilize HTML as your template language and enhance HTML's syntax to represent the components of your application clearly and succinctly. We can define AngularJS directives as some marker by which we can attach some specified properties to the DOM element. We can even transform the DOM's element and children.

In layman’s terms, we can say the directives are used to modify the DOM. In AngularJS, ng- stands for Angular, and many directives start with ng-. In Angular, we have many built-in directives, but you can create your custom directives.

Let’s understand these directives in a much deeper way.

Types of Directives

There are two types of directives in AngularJS. They are as follows:

Structural Directives: They modify the structure of the DOM by adding or removing DOM elements.

Attribute Directives: They modify the attributes of the DOM elements.


Components: They are the directives with a template. This type of directive is the most common directive type.

 

List of Important directives

Some of the important directives of Angular JS are:

The ng-app

The ng-app directive is used to initialize AngularJS. It makes the selected element a root element of the application. 

The ng-init

By using this directive, we can initialize variables in the AngularJS application.

The example below shows the ng-init directive that initializes variables of number, string object, and array.

<!DOCTYPE html>
<html >

<head>
    <script src="~/Scripts/angular.js"></script>
</head>

<body >
    <div ng-app ng-init="greet='Hello everyone!'; amount= 150; myArray = [150, 500]; address = { city:'Panipat', state :'Haryana'}">
        {{amount}}      <br />
        {{myArray[1]}}    <br />
        {{address.city}}
    </div>
</body>

</html>

Result:

150

500

Panipat


In the above-given example, we initialized variables of number, string, object, and array. We can use these variables anywhere in the DOM element hierarchy where they are declared, e.g., variables in this example cannot be used outside of <div> element.

The ng-model

The two-way data binding in AngularJS is done by using this directive. It binds <select>, <input> or <textarea> elements to a specified property on the $scope object. So, the value of the property will be the value of the element and vice-versa.

 

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

 

We can access the property set via ng-model in a controller using the $scope object.

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

The ng-bind

The ng-bind directive binds the ng-model directive, or the model property declared via the $scope or the expression’s result to the HTML element. If the value of expression changes, then It also updates the element.



<!DOCTYPE html>
<html >

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

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

</html>

 

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

The ng-repeat

The purpose of the ng-repeat directive is to repeat HTML once per item present in the array collection.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
    <style>
        div {
            width: 80%;
            height: 150px;
            display: block;
            text-align:center;
            background-color:blue;
        }
    </style>
</head>
<body ng-app="" ng-init="students=['Sunil','Harshad','Anmol']">
    <ol>
        <li ng-repeat="name in students">
            {{name}}
        </li>
    </ol>
    <div ng-repeat="name in students">
        {{name}}
    </div>
</body>
</html>

 

In the above-given example, We used ng-repeat with students array. It creates <li> element for each item present in the student’s array. In the same way  <div> element is repeated.

The ng-disabled

The ng-disabled directive decides to make an HTML element disabled based on the Bool value returned from the specified expression. True means the element will disable, otherwise not.

The ng-if

The ng-if directive decides to create or remove an HTML element based on the Bool value returned from the specified expression. True means it recreates an element; otherwise, the element is removed from the HTML document.

The ng-readonly

The ng-readonly directive decides to make an HTML element read-only based on the Bool value returned from the specified expression. True means the element will become read-only, otherwise not.


The example given below demonstrates ng-if, ng-read-only, and ng-disabled directives.


<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
    <style>
        div {
            width: 80%;
            height: 150px;
            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>

Important points about Directive Syntax

– We can start Directive with data- or x-, it is not compulsory to use ng- syntax only.

Example- ng-model or data-ng-model or x-ng-model all three are correct syntax-wise.

–  We can replace” -” in the directive with “_” or “ : ”  or both. 

Example- ng-model or ng_model or ng:model all are correct syntax-wise.

 

Custom Structural Directive

In AngularJS, custom directives are used to enhance the functionality of HTML. The "directive" function is used to define custom directives. 

AngularJS program discovers matching elements during bootstrap and performs a one-time action using the compile() method of the custom directive, then processes the element using the link() method based on the directive's scope. 

AngularJS allows us to write custom directives for the elements listed below.

  • Element: Directive activates when a matching element is found.
  • Attribute: Directive activates when a matching attribute is found.
  • CSS: Directive activates when a matching CSS style is found.
  • Comment: Directive activates when a matching comment is found.


Advantages of AngularJS Directive

Some of the advantages of using directives are:

  1. Directives help write repeatable and independent code.
  2. They modularize the code by grouping requirement-specific functions together. 
  3. A modular code with well-defined directives can handle its operations and data.
  4. The HTML page and Angular scripts become less cluttered and more ordered.

 

Frequently Asked Question

1). What is the function of the ng-paste directive?

Answer- This directive specifies behaviour on paste events.

 

2). What is the function of the ng-keypress directive?

Answer- This directive specifies behaviour on keypress events.

 

3). What is the function of the ng-list directive?

Answer- This directive converts text into an array(list).


4). What is the function of the ng-required directive?

Answer- This directive specifies the required attribute of an element.

 

5). What is the function of the ng-options directive?

Answer- This directive specifies <options> in a <select> list.

Key Takeaways

So let’s brief everything that we have learned in this blog.

 

In this blog, we learned about different AngularJS directives and their functions and which directive is used for which situation.

 

If you are interested in javascript, You can expand your knowledge by referring to these articles on JavaScript.

Also, if you are preparing for interviews, visit this JavaScript interview question blog.

Happy Reading!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think