Custom Directive in Angular JS

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

Custom Directive in AngularJS: Part One

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,

'use strict';
var testApp = angular.module('TestApp', []);
testApp.directive('shoppingCart', ['$http', function()
{
return
{
restrict: 'E',
template: '<div class="rowDiv">' +
' <div class="col-lg-4">{{item}}</div>' +
' <div class="col-lg-2">{{quantity}}</div>' +
' <div class="col-lg-3"><input type="text" value="" data-ng-model="model.qty" /></div>' +
' <div class="col-lg-3"><input type="button" value="Buy" class="btn-rounded" data-ng-click="model.btnClick(item)" /></div>' +
'</div>',
link: function(scope, element, attr)
{
scope.item = attr.item;
scope.quantity = attr.quantity;
},
controllerAs: 'model',
controller: function($http)
{
var self = this;
self.btnClick = function(item)
{
if (self.qty == undefined || self.qty == '')
{
alert('Put Quantity First')
} else
{
alert('You have Booked ' + item + ' For ' + self.qty + ' No.');
}
}
}
}
}]);

Now, add a html file named index.html and add the below code,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Directive Types</title>
<link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
<script src="../../Scripts/angular.min.js"></script>
<script src="SampleDirective.js"></script>
<script src="IndexController.js"></script>
</head>
<body data-ng-app="TestApp" data-ng-controller="IndexController as model">
<div class="row animated fadeInRight">
<div class="col-lg-12">
<div class="rowDiv">
<h3>{{model.message}}</h3>
</div>
</div>
<div class="col-lg-12">
<div class="rowDiv">
<h2>Shopping Cart</h2>
</div>
</div>
<div class="col-lg-12">
<div class="rowDiv">
<div class="col-lg-4" style="border:solid;border-width:thin; border-color:black;background-color :gray;font-weight:bold;"><span>Product</span></div>
<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>
<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>
<div class="col-lg-3"></div>
</div>
</div>
<div class="col-lg-12">
<shopping-cart item="IPhone" quantity="50 qty"></shopping-cart>
<shopping-cart item="Samsung Note 4" quantity="10 qty"></shopping-cart>
<shopping-cart item="Samsung Note 5" quantity="20 qty"></shopping-cart>
<shopping-cart item="Sony LED" quantity="05 qty"></shopping-cart>
<shopping-cart item="Camera" quantity="07 qty"></shopping-cart>
</div>
</div>
</body>
</html>

Now add another javascript file named indexcontroller.js for angular js controller file and add the below code,

testApp.controller('IndexController', ['$http', function($http, urlService)
{
var self = this;
self.message = 'Isolated Scope';
}]);

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,

'use strict';
var testApp = angular.module('TestApp', []);
testApp.directive('shoppingCart', ['$http', function()
{
return
{
restrict: 'E',
scope: {},
template: '<div class="rowDiv">' +
' <div class="col-lg-4">{{item}}</div>' +
' <div class="col-lg-2">{{quantity}}</div>' +
' <div class="col-lg-3"><input type="text" value="" data-ng-model="model.qty" /></div>' +
' <div class="col-lg-3"><input type="button" value="Buy" class="btn-rounded" data-ng-click="model.btnClick(item)" /></div>' +
'</div>',
link: function(scope, element, attr)
{
scope.item = attr.item;
scope.quantity = attr.quantity;
},
controllerAs: 'model',
controller: function($http)
{
var self = this;
self.btnClick = function(item)
{
if (self.qty == undefined || self.qty == '')
{
alert('Put Quantity First')
} else
{
alert('You have Booked ' + item + ' For ' + self.qty + ' No.');
}
}
}
}
}]);

Now, run the code again and see the output,