Post
Ask Question

Custom Directive in Angular JS - Part Four

In the previous articles, we have already discussed the different types of scope of the custom directives in AngularJS. Now, in this article, we will discuss how to use inheritance in the custom directives. Actually, the inheritance word basically depends on OOPs. But as we know AngularJS is not a language which supports OOPs concepts. But directive inheritance means sometimes we need to create one or more custom directive which works only when it gets the specific value of any other directive. Suppose we want to create a shopping cart page when the shopping card directive will depend on the another directive called qtyvalidate.
 
For this, we first create a html file named index.html and add the below code - 
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Directive Types</title>  
  5.     <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />  
  6.     <script src="../../Scripts/angular.min.js"></script>  
  7.     <script src="SampleDirective.js"></script>  
  8.     <script src="IndexController.js"></script>  
  9.   
  10. </head>  
  11. <body data-ng-app="TestApp" data-ng-controller="IndexController as model">  
  12.     <div class="row animated fadeInRight">  
  13.         <div class="col-lg-12">  
  14.             <div class="rowDiv">  
  15.                 <h3>{{model.message}}</h3>  
  16.             </div>  
  17.         </div>  
  18.         <div class="col-lg-12">  
  19.             <div class="rowDiv">  
  20.                 <h2>Shopping Cart</h2>  
  21.             </div>  
  22.         </div>  
  23.         <div class="col-lg-12">  
  24.             <div class="rowDiv">  
  25.                 <div class="col-lg-3" style="border:solid;border-width:thin; border-color:black;background-color :gray;font-weight:bold;"><span>Product</span></div>  
  26.                 <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>  
  27.                 <div class="col-lg-2" style="border:solid;border-width:thin;border-color:black;background-color :gray;font-weight:bold;"><span>Price</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-2"></div>  
  30.             </div>  
  31.         </div>  
  32.         <div class="col-lg-12">  
  33.             <shopping-cart item="IPhone" quantity="{{model.totalUnit}}" price="40000.00" unit="{{model.priceUnit}}" param="model.args" book="model.validateQuantity()"></shopping-cart>  
  34.         </div>  
  35. </body>  
  36. </html>  
Now,  add a javascript file named indexcontroller.js  and add the below code of the controller - 
  1. testApp.controller('IndexController', ['$http', function ($http, urlService) {  
  2.     var self = this;  
  3.   
  4.     self.message = 'Directive Inheritance';  
  5.     self.priceUnit = 'INR';  
  6.     self.totalUnit = 50;  
  7.     self.args = {  
  8.         quantity: 0  
  9.     };  
  10.   
  11.     self.validateQuantity = function () {  
  12.         self.priceUnit = 'INR1';  
  13.         if (self.args.quantity == 0) {  
  14.             alert('Put valid quantity no for book');  
  15.         }  
  16.         else {  
  17.             if (self.args.quantity > self.totalUnit) {  
  18.                 alert('Booked Qunatity above available Quantity');  
  19.                 self.param.quantity = 0;  
  20.                 return;  
  21.             }  
  22.             else {  
  23.                 alert('Booked Quantity is Available');  
  24.             }  
  25.         }  
  26.     }  
  27. }]);  
Now, add another javascript file for defining the custom directive (file name - SampleDirective.js) and create the first directive named qtyvalidate which is basically an attribute type directive.
  1. 'use strict';  
  2.   
  3. var testApp = angular.module('TestApp', []);  
  4.   
  5. testApp.directive('qtyvalidate', function () {  
  6.     return {  
  7.         restrict: 'A',  
  8.         scope: true,  
  9.         controller: function () {  
  10.             this.validateStock = function (qty) {  
  11.                 alert('Data Validate');  
  12.             }  
  13.         }  
  14.     }  
  15. });  
Now, add another directive named shoppingCart which basically depends on the above mentioned directives. 
  1. testApp.directive('shoppingCart', ['$http', function () {  
  2.     return {  
  3.         restrict: 'E',  
  4.         scope: {  
  5.             unit: '@'  
  6.         },  
  7.         bindToController: {  
  8.             param: '=',  
  9.             book: '&'  
  10.         },  
  11.         require: '^qtyvalidate',  
  12.         template: '<div class="rowDiv" qtyvalidate>' +  
  13.                     '    <div class="col-lg-3">{{item}}</div>' +  
  14.                     '    <div class="col-lg-2">{{qty}}</div>' +  
  15.                     '    <div class="col-lg-2">{{price}} {{unit}}</div>' +  
  16.                     '    <div class="col-lg-3"><input type="text" value="" data-ng-model="model.param.quantity" /></div>' +  
  17.                     '    <div class="col-lg-1"><input type="button" value="Validate" class="btn-rounded" data-ng-click="model.book();" /></div>' +  
  18.                     '    <div class="col-lg-1"><input type="button" value="Buy" class="btn-rounded" data-ng-click="model.validateData();" /></div>' +  
  19.                     '</div>',  
  20.         templateUrl: 'SampleDirective.html',  
  21.         link: function (scope, element, attr, validateCtrl) {  
  22.             scope.item = attr.item;  
  23.             scope.qty = attr.quantity;  
  24.             scope.price = attr.price;  
  25.             scope.unit = '$';  
  26.             scope.validateCtrl = validateCtrl;  
  27.         },  
  28.         controllerAs: 'model',  
  29.         controller: function ($http) {  
  30.             var self = this;  
  31.   
  32.             if (self.param == undefined) {  
  33.                 self.param = {};  
  34.             }  
  35.   
  36.             if (self.param.quantity == undefined) {  
  37.                 self.param.quantity = 0;  
  38.             }  
  39.   
  40.             self.validateData = function () {  
  41.                 validateCtrl.validateStock(qty);  
  42.             }  
  43.   
  44.         }  
  45.     }  
  46. }]);  
As you can see, the second directive, which is basically is a child directive, uses the keyword require  to reference the parent directives.  All of you can see an earlier post related to tab control in angular js regarding this concept.
 
Read more articles on AngularJS:


Similar Articles