During you Create Dynamic Directives in AngularJS $watch method helps to Fetch value from View. In this example I am Creating a Dynamic Tab. The directive I named ng-tab. While declaring my directive in HTML body I am passing 2 things length and data. Data is nothing but the tab names in the shape of state and its cities. Now just you think how can we get these values in AngularJS Controller. The same $watch method do.
Look at my app.js file. In scope I am taking length & data as the key. Then in link function fetching those values using $watch method. The key thing you will notice the length is accepting ‘=’ when data is accepting ‘@’. This because of Data types. Generally for integer we take ‘=’ and ‘@’ for string characters.
Index.htm
<!DOCTYPE html>
<html ng-app="tabModule">
<head>
<meta charset="utf-8">
<title>Angularjs $watch and Link Function Example</title>
<!--AngularJS library CDN link-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<!--Jquery library CDN link-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!--Jquery UI CDN link-->
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<!--BootStrap CDN links-->
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-theme.min.css" type="text/css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
</head>
<body>
<ng-tab length="4" data='{"Country":[{"state":"Maharashtra", "cities":"Mumbai, Pune, Nagpur, Thane, Nashik"},{"state":"Odisha", "cities":"Bhubaneswar, Cuttack, Rourkela, Brahmapur, Sambalpur"},{"state":"Karnataka", "cities":"Bellary, Bidar, Gulbarga, Koppal, Raichur"},{"state":"Chandigarh", "cities":"Ludhiana, Amritsar, Jalandhar, Patiala, Bathinda"}]}'></ng-tab>
</body>
</html>
my-tab.htm
<!--ngTab Template-->
<h3><center>{{ appDetails }}</center></h3>
<div class="container">
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li ng-class="{active: $first}" ng-repeat="item in tempArrTab">
<a href="#{{ item }}" data-toggle="tab">{{ item }}</a>
</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div ng-repeat="item in tempArrTab" class="tab-pane" ng-class="{active: $first}" id="{{ item }}">
<h2>{{ item }}</h2>
<p>Welcome to {{ item }}. Visit Us.</p>
Cities : <input list="tags-{{ $index }}">
</div>
<div ng-repeat="compitem in tempCompArr">
<datalist id="tags-{{ $index }}">
<option ng-repeat="items in compitem.split(',')" value="{{ items }}">
</datalist>
</div>
</div>
</div>
</div>
app.js
/* ng-tab Module */
angular.module('tabModule', []).directive('ngTab', function() {
return {
restrict: 'E',
transclude: true,
scope: {
/* Accepting the number of Tab you want in your app */
"length": '=',
/* Accepting the data in JSON for Tab */
"data": '@'
},
link: function (scope, element) {
scope.$watch("length", function (arrlen) {
scope.$watch("data", function (value) {
var obj = JSON.parse(value);
var lenjson = obj.Country.length;
var arrTab = [];
var autoCompArray = [];
/* Assigning input JSON data to Array */
if (arrlen == lenjson) {
for(i=0; i<lenjson; i++) {
arrTab.push(obj.Country[i].state);
autoCompArray.push(obj.Country[i].cities)
}
} else {
alert('Please provide accurate data length.');
}
scope.tempArrTab = arrTab;
scope.tempCompArr = autoCompArray;
scope.appDetails = 'Create your own ng-tab using AngularJS';
}, false);
}, false);
},
controller: function($scope, $filter) {
$(function() {
$("#tabs").tabs();
});
},
templateUrl: 'my-tab.htm'
};
});
