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 : 11,581   
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)
11 MAR
ASP.NET MVC with Angular2 Development (Online)

09:00 PM - 11:00 PM IST( TUS, THR, SAT)

Know More
6 MAR
Master Class Fast Track MVC 5 with Angular2 Development (Online)

10:30 AM -03:30 PM IST (Fast Track)

Know More
6 MAR
Angular 2 Master Class Fast Track Online Development Training (Online)

10:30 AM- 01:30 PM IST

Know More
27 FEB
ASP.NET MVC with Angular2 Development (Online)

07:00 AM - 09:00 AM IST( MON, WED, FRI)

Know More
25 FEB
ASP.NET MVC with Angular2 Development (Classroom)

05:00 PM-06:30 PM

Know More
25 FEB
Xamarin Forms : Build Cross-platform Apps (Classroom)

3:00 PM-4:30 PM IST

Know More
25 FEB
ASP.NET MVC with Angular2 Development (Classroom)

3:00 PM-4:30 PM

Know More
14 FEB
.NET Development (Classroom)

11:00 AM-12:00 PM

31 JAN
ASP.NET MVC with Angular2 Development (Online)

07:00 AM-09:00 AM IST(Tuesday & Thursday)

30 JAN
NODEJS & MEAN Stack 2.x Development (Online)

09:00 PM-11:00 PM IST( MON, WED, FRI)

15 JAN
PPC Marketing (Classroom)

04:00 PM-05:30 PM

10 JAN
ASP.NET MVC with AngularJS Development (Online)

09:00 PM-11:00 PM IST on (TUE, THRU,SAT)

31 DEC
ASP.NET MVC with AngularJS Development (Classroom)

09:30 AM-11:00 AM

5 NOV
ASP.NET MVC with AngularJS Development (Classroom)

08:00 AM-09:30 AM

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 

Professional Speaks

+