Directive Scopes

by rahulshivsharan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<div class="container" ng-app="MyApp">
    <div class="well" ng-controller="myCtrl">
        <parent-class>
                <child-class array="studentList"></child-class>
            </parent-class>
            <pre />
            <ul>
                <li ng-repeat="student in studentList">{{student}}</li>
            </ul>
    </div>
</div>

JavaScript

angular.module("MyApp",[]);
			(function(){
				angular.module("MyApp").controller("myCtrl",myCtrl);
				angular.module("MyApp").controller("StudentCtrl",StudentCtrl);
				angular.module("MyApp").directive("parentClass",parentClass);
				angular.module("MyApp").directive("childClass",childClass);
				
				function parentClass(){
					var obj = {		
						restrict : 'EA',
						controller : "StudentCtrl" 
					}
					
					return obj;
				};
				
				function childClass(){
					var obj = {
						restrict : 'EA',
						require : "^parentClass",
						scope : {
							array : '='
						},	
						template : "<ol><li ng-repeat='student in array'>{{student}}</li></ol>",
						link : function(scope,element,attrs,someCtrl){						
								
						}
					}
					
					return obj;
				}
				
				function myCtrl($scope){					
					$scope.studentList = ["Tom Cruise","Jammy Watson","Simon Colins"]					
				};
				
				function StudentCtrl($scope){
					$scope.studentList = ["Shahrukh Khan","Salmaan Khan","Amir Khan"]
					
				};
				
			})();