Please enable Javascript to correctly display the contents on Dot Net Tricks!

Understanding AngularJS Directive

  Author : Shailendra Chauhan
Posted On : 11 Sep 2014
Total Views : 12,565   
Updated On : 26 Sep 2016
 

AngularJS directives extend the HTML elements with new behaviors. AngularJS directive help you to manipulate HTML elements, handle event, perform data binding, associate controllers/scope with a view and many more things. AngularJS provide you some built-in directives like as ng-app, ng-controller, ng-repeat, ng-model etc. to make it easy.

Basically, AngularJS directives are its core functions that get run when the DOM is compiled by the compiler. These are start with the ng- prefix attributes.

AngularJS : A simple directive example

<div ng-app="app">
 <input type="text" ng-model="name">
 <div>{{ name }}</div>
</div>

Invoking directive

AngularJS provides you four ways to invoke a directive from HTML. These are all equivalent in AngularJS.

  1. Directive as an attribute

    <div ng-directive></div>
    
  2. Directive as a CSS class

    <div class="ng-directive: expression;"></div>
    
  3. Directive as an element
    <ng-directive></ng-directive>
    

  4. Directive as a comment

    <!-- directive: ng-directive expression -->
    

Invoking directive with name prefixes

You can also invoke a directive with name prefix like ng-,ng:,ng_,x-ng-,data-ng-. These are all equivalent in AngularJS.

<input type="text" ng-model="directivename"/>
<div ng-bind="directivename"></div>
<div ng:bind="directivename"></div>
<div ng_bind="directivename"></div>
<div x-ng-bind="directivename"></div>
<div data-ng-bind="directivename"></div>

Note

Use the data-prefixed version (e.g. data-ng-bind for ngBind) of directive, if you want to validate your HTML controls value.

Creating a custom directive

AngularJS also allow you to create your own directives based on your requirements. There is no built-in directive for comparing password in angular. So you can create your own custom directive for comparing password.

Creating Custom Directive Syntax

<script>
//creating custom directive syntax
myApp.directive("myDir", function () {
 return {
 restrict: "E", //define directive type like E = element, A = attribute, C = class, M = comment
 scope: { //create a new child scope or an isolate scope

 //@ reads the attribute value,
 //= provides two-way binding,
 //& works with functions

 title: '@'
 },
 template: "<div>{{ myName }}</div>",// define HTML markup
 templateUrl: 'mytemplate.html', //path to the template, used by the directive
 replace: true | false, // replace original markup with template yes/no
 transclude: true | false, // copy original HTML content yes/no
 controller: function (scope) { //define controller, associated with the directive template
 //TODO:
 },
 link: function (scope, element, attrs, controller) {//define function, used for DOM manipulation
 //TODO:
 }
 }
 });
</script> 

Creating custom directive for comparing textbox values

<script>
 //defining module
 var myapp = angular.module('myApp', []);

 //creating custom directive
 myapp.directive('ngCompare', [function () {
 return {
 require: 'ngModel',
 link: function (scope, elem, attrs, ctrl) {
 var firstfield = "#" + attrs.ngCompare;

 //second field key up
 elem.on('keyup', function () {
 scope.$apply(function () {
 var isMatch = elem.val() === $(firstfield).val();
 ctrl.$setValidity('valueMatch', isMatch);
 });
 });

 //first field key up
 $(firstfield).on('keyup', function () {
 scope.$apply(function () {
 var isMatch = elem.val() === $(firstfield).val();
 ctrl.$setValidity('valueMatch', isMatch);
 });
 });
 }
 }
 }]);
</script>

AngularJS : Creating custom directive with example

<!DOCTYPE html>
<html>
<head>
 <title>AngularJS Custom Directive</title>
 <link href="css/bootstrap.css" rel="stylesheet" />
 <link href="css/bootstrap-theme.css" rel="stylesheet" />
 <script src="lib/jquery-1.11.1.js"></script>
 <script src="lib/angular.js"></script>
</head>
<body>
 <div ng-app="myApp" ng-controller="mainController">
 <br />
 <div class="container">
 <form name="userForm" ng-submit="submitForm()" novalidate>
 <h2>AngularJS Custom Directive (comparing input values)</h2>

 <!-- EMAIL -->
 <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid}">
 <label>Email</label>
 <input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Your Email Address" ng-required="true">
 <p ng-show="userForm.email.$error.required" class="help-block">Email is required.</p>
 <p ng-show="userForm.email.$error.email" class="help-block">Enter a valid email.</p>
 </div>

 <!-- Password -->
 <div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid}">
 <label>Password</label>
 <input type="Password" name="password" id="password" class="form-control" ng-model="user.password" placeholder="Your Password" ng-required="true">
 <p ng-show="userForm.password.$invalid" class="help-block">Your password is required.</p>
 </div>

 <!-- Confirm Password -->
 <div class="form-group" ng-class="{ 'has-error' : userForm.confirmPassword.$invalid}">
 <label>Confirm Password</label>
 <input type="Password" name="confirmPassword" class="form-control" ng-model="user.confirmPassword" placeholder="Confirm Your Password" ng-compare="password" ng-required="true">
 <p ng-show="userForm.confirmPassword.$error.required" class="help-block">Your confirm password is required.</p>
 <p ng-show="userForm.confirmPassword.$error.valueMatch && !userForm.confirmPassword.$error.required" class="help-block">Confirm password doesnot match.</p>
 </div>

 <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Register</button>
 </form>
 </div>
 </div>

 <script>
 //defining module
 var myapp = angular.module('myApp', []);

 //creating custom directive
 myapp.directive('ngCompare', [function () {
 return {
 require: 'ngModel',
 link: function (scope, elem, attrs, ctrl) {
 var firstfield = "#" + attrs.ngCompare;

 //second field key up
 elem.on('keyup', function () {
 scope.$apply(function () {
 var isMatch = elem.val() === $(firstfield).val();
 ctrl.$setValidity('valueMatch', isMatch);
 });
 });

 //first field key up
 $(firstfield).on('keyup', function () {
 scope.$apply(function () {
 var isMatch = elem.val() === $(firstfield).val();
 ctrl.$setValidity('valueMatch', isMatch);
 });
 });
 }
 }
 }]);

 // create angular controller
 myapp.controller('mainController', function ($scope) {

 // function to submit the form
 $scope.submitForm = function () {

 // check to make sure the form is completely valid
 if ($scope.userForm.$valid) {
 alert('form is submitted');
 }
 };
 });
 </script>
</body>
</html>

How it works...

What do you think?

I hope you will enjoy the AngularJS directive while developing your app with AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.



Free Interview Books
 
COMMENTS (0)
6 JUN
Hadoop Development cum Administration (Online)

7:00 AM-9:00AM IST

Know More
30 MAY
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

Know More
28 MAY
ASP.NET Core with Angular4 Development (Classroom)

10:30 AM-11:30 AM Weekend

Know More
28 MAY
ASP.NET Core with Angular4 Development (Classroom)

10:30 AM-11:30 AM Weekend

27 MAY
ASP.NET MVC with Angular4 Development (Classroom)

4:00 PM-5:30 PM Weekend

20 MAY
Angular2 and Angular4 Development (Online)

08:00 AM-10:00 AM IST(+5.30 GMT) Weekend

20 MAY
NodeJS with Angular4 Development (Classroom)

5:00 PM-6:30 PM Weekend

8 MAY
ASP.NET MVC with Angular4 Development (Online)

07:00 AM-09:00 AM IST(+5:30 GMT) M/W/F

2 MAY
ASP.NET Core Development (Online)

07:00 AM - 09:00 AM IST( TUS, THR)

29 APR
ASP.NET MVC with Angular2 Development (Classroom)

9:30 AM-11:00 AM

22 APR
MEAN Stack 2 Development (Classroom)

11:00 AM-12:30 PM Weekend

10 APR
Master Class ASP.NET MVC 5 with Angular2 Plus Angular4 Development (Online)

09:00 PM - 11:00 PM IST (M/W/F)

25 MAR
Xamarin Forms : Build Cross-platform Apps (Classroom)

8:00 AM-9:30AM Weekend

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 
+