Directive Controller Inheritance

Directive controller inheritance

by rahulshivsharan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
		<div ng-app="app" ng-controller="parentCtrl as vm" class="container">
			<div class="page-header">
				<h3>{{vm.title}}</h3>
			</div>
			<div class="row">
				<div class="col-md-6">
					<div class="page-header">
						<h5>{{vm.actorName}}</h5>						
					</div>						
				</div>
			</div>
			<div class="row">
				<div class="col-md-6" load-films></div>	
			</div>
		</div>

JavaScript

angular.module("app",[]);
			angular.module("app").controller("parentCtrl",parentCtrl);
			angular.module("app").controller("childCtrl",childCtrl);
			angular.module("app").directive("loadFilms",loadFilms);

			parentCtrl.$inject = ["$scope"];
			childCtrl.$inject = ["$scope"];

			function parentCtrl($scope){
				var vm = this;
				vm.title = "Directive and nested scoping";
				vm.actorName = "Amithabh Bachhan";
				vm.year = ["70's","80's","90's"];
			}

			function childCtrl($scope){
				var vm = this;
				
				vm.selectedYear = "";
				
				vm.moviesObj = {
					"70's" : ["Anand","Lawaris","Kala Pathhar","Deewar","Amar Akbar Anthony","Mili"],
					"80's" : ["Sharabi","Kaalia","Silsila","Satte Pe Satta","Nastik","Shahensha"],
					"90's" : ["Hum","Aaj Ka Arjun", "Ajooba","Khuda Gawah","Ganga Jamuna Saraswati","Lal Badshah"]
				}
				
				vm.movies = [];
				
				vm.getMovies = function(){
					vm.movies = vm.moviesObj[vm.selectedYear];
				}
			}

			function loadFilms(){
				return {
					restrict : "EA",
					controller : "childCtrl",
					controllerAs : "cCtrl",					
					template : function(tElem, tAttrs){
						var str = "<select ng-model='cCtrl.selectedYear' "+
										 "data-ng-options='y as y for y in vm.year' " +
										 "class='form-control' "+
										 " ng-change='cCtrl.getMovies()'>" + 
											"<option value=''>Select</option>" + 
								"</select>" +
								"<br />" + 
								"<ol class='slide-animate-container'>" + 
								"	<li class='slide-animate' ng-repeat='m in cCtrl.movies'>{{m}}</li>"+
								"</ol>";
						return str;
					}
				} 
			}