Angular

Custom Directive in Angular JS - Part Two

Before reading this article, please go through the following article:

In my previous article, we discussed the different types of directives. Now, in this article, we will discuss the isolated scope of the directive. Now when we create element based directives, then we define two different types of scope within the directives. One of them is shared scope and another is isolated scope. Since Angular js always maintains its two-way binding technique when any element is updated within the directive, then it always updates all the related elements in the directive. Basically it is called shared scope. For a demonstration of this, we will create a page just like a shopping cart where multiple items will be displayed in tabular format and we can putin the required items and click on the buy buttons.
 
For this, we first create a js file named sampleDirective.js and write down the below code,
  1. 'use strict';  
  2. var testApp = angular.module('TestApp', []);  
  3. testApp.directive('shoppingCart', ['$http', function()   
  4. {  
  5.     return   
  6.     {  
  7.         restrict: 'E',  
  8.         template: '<div class="rowDiv">' +  
  9.             ' <div class="col-lg-4">{{item}}</div>' +  
  10.             ' <div class="col-lg-2">{{quantity}}</div>' +  
  11.             ' <div class="col-lg-3"><input type="text" value="" data-ng-model="model.qty" /></div>' +  
  12.             ' <div class="col-lg-3"><input type="button" value="Buy" class="btn-rounded" data-ng-click="model.btnClick(item)" /></div>' +  
  13.             '</div>',  
  14.         link: function(scope, element, attr)  
  15.         {  
  16.             scope.item = attr.item;  
  17.             scope.quantity = attr.quantity;  
  18.         },  
  19.         controllerAs: 'model',  
  20.         controller: function($http)  
  21.         {  
  22.             var self = this;  
  23.             self.btnClick = function(item)  
  24.             {  
  25.                 if (self.qty == undefined || self.qty == '')  
  26.                 {  
  27.                     alert('Put Quantity First')  
  28.                 } else  
  29.                 {  
  30.                     alert('You have Booked ' + item + ' For ' + self.qty + ' No.');  
  31.                 }  
  32.             }  
  33.         }  
  34.     }  
  35. }]);  
Now, add a html file named index.html and add the below code,
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <title>Directive Types</title>  
  6.     <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />  
  7.     <script src="../../Scripts/angular.min.js"></script>  
  8.     <script src="SampleDirective.js"></script>  
  9.     <script src="IndexController.js"></script>  
  10. </head>  
  11.   
  12. <body data-ng-app="TestApp" data-ng-controller="IndexController as model">  
  13.     <div class="row animated fadeInRight">  
  14.         <div class="col-lg-12">  
  15.             <div class="rowDiv">  
  16.                 <h3>{{model.message}}</h3>  
  17.             </div>  
  18.         </div>  
  19.         <div class="col-lg-12">  
  20.             <div class="rowDiv">  
  21.                 <h2>Shopping Cart</h2>  
  22.             </div>  
  23.         </div>  
  24.         <div class="col-lg-12">  
  25.             <div class="rowDiv">  
  26.                 <div class="col-lg-4" style="border:solid;border-width:thin; border-color:black;background-color :gray;font-weight:bold;"><span>Product</span></div>  
  27.                 <div class="col-lg-2" style="border:solid;border-width:thin;border-color:black;background-color :gray;font-weight:bold;"><span>Available Quantity</span></div>  
  28.                 <div class="col-lg-3" style="border:solid;border-width:thin;border-color:black;background-color :gray;font-weight:bold;"><span>Taken Qty</span></div>  
  29.                 <div class="col-lg-3"></div>  
  30.             </div>  
  31.         </div>  
  32.         <div class="col-lg-12">  
  33.             <shopping-cart item="IPhone" quantity="50 qty"></shopping-cart>  
  34.             <shopping-cart item="Samsung Note 4" quantity="10 qty"></shopping-cart>  
  35.             <shopping-cart item="Samsung Note 5" quantity="20 qty"></shopping-cart>  
  36.             <shopping-cart item="Sony LED" quantity="05 qty"></shopping-cart>  
  37.             <shopping-cart item="Camera" quantity="07 qty"></shopping-cart>  
  38.         </div>  
  39.     </div>  
  40. </body>  
  41.   
  42. </html>  
Now add another javascript file named indexcontroller.js for angular js controller file and add the below code,
  1. testApp.controller('IndexController', ['$http', function($http, urlService)  
  2. {  
  3.     var self = this;  
  4.     self.message = 'Isolated Scope';  
  5. }]);  
Now run the code and see the output,
Now, in this sample, we can see that whenever we put in any quantity it always copies the same values to all the rows. Now, if want to use each of the directive scopes independently, then we just need to add scope in the directive code just like below,
  1. 'use strict';  
  2. var testApp = angular.module('TestApp', []);  
  3. testApp.directive('shoppingCart', ['$http', function()  
  4. {  
  5.     return  
  6.     {  
  7.         restrict: 'E',  
  8.         scope: {},  
  9.         template: '<div class="rowDiv">' +  
  10.             ' <div class="col-lg-4">{{item}}</div>' +  
  11.             ' <div class="col-lg-2">{{quantity}}</div>' +  
  12.             ' <div class="col-lg-3"><input type="text" value="" data-ng-model="model.qty" /></div>' +  
  13.             ' <div class="col-lg-3"><input type="button" value="Buy" class="btn-rounded" data-ng-click="model.btnClick(item)" /></div>' +  
  14.             '</div>',  
  15.         link: function(scope, element, attr)  
  16.         {  
  17.             scope.item = attr.item;  
  18.             scope.quantity = attr.quantity;  
  19.         },  
  20.         controllerAs: 'model',  
  21.         controller: function($http)  
  22.         {  
  23.             var self = this;  
  24.             self.btnClick = function(item)  
  25.             {  
  26.                 if (self.qty == undefined || self.qty == '')  
  27.                 {  
  28.                     alert('Put Quantity First')  
  29.                 } else  
  30.                 {  
  31.                     alert('You have Booked ' + item + ' For ' + self.qty + ' No.');  
  32.                 }  
  33.             }  
  34.         }  
  35.     }  
  36. }]);  
Now, run the code again and see the output,

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs