Overview Of AngularJS Directives

What is AngularJS?

AngularJS is a JavaScript Framework that is very powerful and its library is written in JavaScript. This framework is used to make single page applications. From this definition, you should get an idea that if we want to make a Single Page application, AngularJS is the answer as the most powerful JavaScript Framework. AngularJS extends the HTML with new attributes. AngularJS allows us to write applications in a clean Model-View-Controller way.

What is a Directive?

These are markers on a DOM that tell the compiler of AngularJs to attach a specific behavior to that DOM element.

AngularJS helps to extend HTML, using directives. AngularJS has some built in directives and it also lets us define our own directives. Basically, AngularJs directive is the extended HTML with prefix ng.

Some built in AngularJS Directives are given below.

ng-app- This initializes the AngularJS Application. It defines the root of Angular Application.
ng-init- This initializes the application's data.
ng-model- This directive binds the values of AngularJS application data to HTML input controls.
ng-bind- This directive binds the application data to View (HTML View).

After reading this, we must have a question in our mind about what the HTML compiler is. What does it mean to compile HTML? In AngularJS, compilation means attaching the directives to HTML elements to make them attractive in order to transform the elements.

Some AngularJS defined directives are given below.

Directive	Description
ng-app	Defines the root element of an application.
ng-bind	Binds the content of an HTML element to application data.
ng-bind-html	Binds the innerHTML of an HTML element to Application data and also removes dangerous code from the HTML string.
ng-bind-template	Specifies that the text content should be replaced with a template.
ng-blur	Specifies a behavior on blur events.
ng-change	Specifies an expression to evaluate when the content is being changed by the user.
ng-checked	Specifies if an element is checked or not.
ng-class	Specifies CSS classes on HTML elements.
ng-class-even	Same as ng-class, but will only take effect on even rows.
ng-class-odd	Same as ng-class, but will only take effect on odd rows.
ng-click	Specifies an expression to evaluate when an element is being clicked.
ng-controller	Defines the controller object for an application.
ng-copy	Specifies a behavior on copy events.
ng-cut	Specifies a behavior on cut events.
ng-dblclick	Specifies a behavior on double-click events.
ng-disabled	Specifies if an element is disabled or not.
ng-focus	Specifies a behavior on focus events.
ng-form	Specifies an HTML form to inherit the controls from.
ng-hide	Hides or shows HTML elements.
ng-href	Specifies a URL for the <a> element.
ng-if	Removes HTML element, if a condition is false.
ng-include	Includes HTML in an application.
ng-init	Defines initial values for an application.
ng-jq	Specifies that the application must use a library, like jQuery.
ng-keydown	Specifies a behavior on keydown events.
ng-keypress	Specifies a behavior on keypress events.
ng-keyup	Specifies a behavior on keyup events.
ng-list	Converts text into a list (array).
ng-maxlength	Specifies the maximum number of characters allowed in the input field.
ng-minlength	Specifies the minimum number of characters allowed in the input field.
ng-model	Binds the value of HTML controls to the application's data.
ng-model-options	Specifies how updates in the model are done.
ng-mousedown	Specifies a behavior on mousedown events.
ng-mouseenter	Specifies a behavior on mouseenter events.
ng-mouseleave	Specifies a behavior on mouseleave events.
ng-mousemove	Specifies a behavior on mousemove events.
ng-mouseover	Specifies a behavior on mouseover events.
ng-mouseup	Specifies a behavior on mouseup events.
ng-non-bindable	Specifies that no data binding can happen in this element, or its children.
ng-open	Specifies the open attribute of an element.
ng-options	Specifies <options> in a <select> list.
ng-paste	Specifies a behavior on paste events.
ng-pluralize	Specifies a message to display according to en-us localization rules.
ng-readonly	Specifies the readonly attribute of an element.
ng-repeat	Defines a template for each data in a collection.
ng-required	Specifies the required attribute of an element.
ng-selected	Specifies the selected attribute of an element.
ng-show	Shows or hides HTML elements.
ng-src	Specifies the src attribute for the <img> element.
ng-style	Specifies the style attribute for an element.
ng-submit	Specifies expressions to run on onsubmit events.
ng-switch	Specifies a condition that will be used to show/hide child elements.
ng-value	Specifies the value of an input element.

Examples of some directive used in examples,

<div ng-app="">
<p>FirstName: <input type="text" ng-model="fname"></p>
<p ng-bind="fname"></p>
</div>

ng-app directive is used in the div tag <div>. This makes this div tag the owner of this AngularJS application, which means this confirms that from this div, we are staring the Angular application and Angular features will be starting from this tag.

ng-model directive, in the input tag, binds the value of this input field to variable “fname.”This fname's value has been assigned by this ng-model. Whatever we type in this input field, the value will be assigned to fname variable. ng-bind directive now binds the value, which was assigned to the variable “fname”, to innerHtml of the <span> tag.

Now, if we run the application we will see the screen, as shown below.

We can also describe it by using Angular expression.

<div ng-app="" ng-init="fName='Jasbeer'">
<p>Name: <input type="text" ng-model=" fName "></p>
<p>You wrote: {{ fName }}</p>
</div>

Here, ng-app tells AngularJS that the owner of the Application is <div> tag. The {{ fName }} expression used in the example is the AngularJS data binding expression. It binds AngularJS expressions with AngularJS data. The expression {{ fName }} is connected with ng-model. Whatever n-model will have the value of fName variable, the expression {{ fName }} will get the same. If we run this program, we will get the output given below.

Here, we will see that the input box will be pre-filled with data “Jasbeer”, as we have provided in the directive ng-init. ng-init is used to initialize the data.

Let’s check one more directive ng-repeat. ng-repeat directive actually works like thefor loop. It clones HTML elements once for each item in a collection.

Suppose we have an array, where we store student names. We will display the student names one by one in a collection. We will use ng-repeat for it. First, we will set the array with student names, using ng-init, which will initialize the student names in a variable, then we will use this variable in ng-repeat to repeat the items in a collection.

Suppose we have an array of student names.

studentNames=['Jasbeer','Manpreet','Jatinder']

We will initialize this, as shown below.

ng-init="studentNames=['Jasbeer','Manpreet','Jatinder']"

We will write the code to use ng-repeat, as shown below.

<div ng-app="" ng-init="studentNames=['Jasbeer','Manpreet','Jatinder']">
<ul>
<li ng-repeat="x in studentNames">
{{ x }}
</li>
</ul>
</div>

Here, in the first line, we are initializing the studentNames, followed by repeating each item of the array, which was set in the variable studentNames.

There are many Angular directives and you can use them whenever needed. Now, we will see how can we create our own directive; i.e., a Custom Directive.

Creating Custom Directives

Before writing a directive, we must know how Angular’s HTML Compiler $compile determines when to use a given directive.

Element matches a directive when the directive is a part of its declaration. We can have

<my-directive>{{fName}}</my-directive>

Here, <my-directive> element matches the mydirective directive. $compile matches the directive, which is based on the element name, attributes, class names and comment.

We can create our own AngularJS directives. To create the directives, we first have to register our directives. The directives are registered on the modules. We will learn about the modules later.

We use module.directive API to register a directive. Directives are created, using .directive function. We should make HTML element with the same tag name as of directive to invoke the directive. The directives are always created, using camel case name like myDirective, but when we have to invoke it, we must use “-“ separated name like my directive.

Module.directive takes the normalized directive name, followed by the factory function and factory function returns an object with the different options to tell $compile that how the directive should behave when matched with HTML element.

Now, let’s create a directive in AngularJS.

Example

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Custom Angular Directives</title>
</head>
<body ng-app="myApp">
<my-directive></my-directive>
<script>
var app = angular.module("myApp", []);
app.directive("myDirective", function () {
return {
template: "<h1>Created custom directive!</h1>"
};
});
</script>
</body>
</html>

You can see we have initialized the directive by using the element name as my-directive here.

<my-directive></my-directive>

We can invoke the directive by using element name, attribute, class and comment. It will print what will be returned by the factory function by matching the directive name.

If we run this the output will be as shown below.

Restrict Custom Directives:

We can make the directive invoke by element name, attribute, class or comment by restricting it. We have a restrict property. We can add that property with the value as “A”, “E”, “C” or “M”.

Restrict Values

A Attribute
E Element Name
C Class
M Comment.

We can use this, as shown below.

//Restrict property for attribute
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
return {
restrict: "A",
template: "<h1>Created custom directive!</h1>"
};
});

Here, we have restricted it to an attribute only. The directive can only be invoked here by an attribute. For the reference, the command is given below.

<div my-Directive ></div>

These will produce the same result as displayed by using element name restriction.

Attribute

<div my-Directive ></div>

If we run the code for restrict A, then we will get output like :

Class

<div class="my-directive"></div>

Let us see this with an example for class restrict.

code :

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Custom Angular Directives</title>
</head>
<body ng-app="myApp">
<div class="my-directive"></div>
<script>
var app = angular.module("myApp", []);
app.directive("myDirective", function () {
return {
restrict: "C",
template: "<h1>Created custom directive , Restricted Class!</h1>"
};
});
</script>
</body>
</html>

If we run this, we will get the output as :

Comment

For comment -- below is an example depicting directive for comment

Code:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Custom Angular Directives</title>
</head>
<body ng-app="myApp">
<script>
var app = angular.module("myApp", []);
app.directive("myDirective", function () {
return {
restrict: "M",
replace: true,
template: "<h1>Created custom directive , Restricted Comment!</h1>"
};
});
</script>
</body>
</html>

If we run this, we will get an output like below:

Element Name

<my-directive></my-directive>

If we want to restrict the directive for an element only, then we will use Restrict value : E, Below is an example for Element name

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Custom Angular Directives</title>
</head>
<body ng-app="myApp">
<my-directive></my-directive>
<script>
var app = angular.module("myApp", []);
app.directive("myDirective", function () {
return {
restrict: "E",
template: "<h1>Created custom directive , Restricted Element name!</h1>"
};
});
</script>
</body>
</html>

We will get the output as shown below:

By default, the value is EA, and it means for both element name and an attribute.

This was about the directives. In the next article, I will explain the Model and data-binding in AngularJS with the examples. Please provide feedback for this article.

4 Comments

Join the conversation! Your thoughts help the community grow.

Jasbeer Singh9y ago
Thanks Neha for your valuable feedback.
Neha9y ago
Nice one...............................
Jasbeer Singh9y ago
Thankyou for your feedback Ershad..
Former member9y ago
Nice explanation of Angularjs 1.5 Directive