Directive Scoping

Implicit Scope tryout

by rahulshivsharan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">

  <div ng-app="Demo" ng-controller="myctrl 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

var demo = angular.module("Demo",[]);
			demo.controller("myctrl",myctrl);
			demo.controller("childCtrl",childCtrl);
			demo.directive("loadFilms",loadFilms);

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

			function myctrl($scope){
				var vm = this;
				vm.title = "Directive and nested scoping";
				vm.actorName = "Amithabh Bachhan";
				$scope.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 : "vm",
					scope : true,
					template : function (tElem, tAttrs){
            var str = "<select ng-model='vm.selectedYear' data-ng-options='y as y for y in year' " + "class='form-control' ng-change='vm.getMovies()'>" + 
            "<option value=''>Select</option>" + 
            "</select>" +
            "<br />" + 
            "<ol>" + 
            "	<li ng-repeat='m in vm.movies'>{{m}}</li>"+
            "</ol>";
          	return str;
          }
				} 
			}