Example of Scope hierarchy in Angular JS
Angular JS has a $scope object which is mostly used to expose the domain model, model or domain level properties are assigned to $scope and can be accessed in view as well as controller.
In a single application we can have multiple controllers and each controller can refer to their own instance of $scope object, parent scope as well as $rootScope which is parent most scope of an application.$rootScope is created when the application bootstraps.
In the below example I have 2 controllers for my application, one is mainController and other one is named as subController. subController has a child controller named as childController.
MainController has one property named as Mngname, and it assigns a property named compayName to it's parent scope which is nothing but $rootscope.
SubController has one property named as amName.
ChildController takes $rootScope along with $scope as it's inputs, it has one property named empName, it creates and assigns one property of it's parent scope i:e, scope of SubController named as dept. It creates another property comp which holds the value of companyName property of $rootScope.
In a single application we can have multiple controllers and each controller can refer to their own instance of $scope object, parent scope as well as $rootScope which is parent most scope of an application.$rootScope is created when the application bootstraps.
In the below example I have 2 controllers for my application, one is mainController and other one is named as subController. subController has a child controller named as childController.
MainController has one property named as Mngname, and it assigns a property named compayName to it's parent scope which is nothing but $rootscope.
SubController has one property named as amName.
ChildController takes $rootScope along with $scope as it's inputs, it has one property named empName, it creates and assigns one property of it's parent scope i:e, scope of SubController named as dept. It creates another property comp which holds the value of companyName property of $rootScope.
<!DOCTYPE html>
<html>
<head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/
angular.js"></script>
<script>
var mainController=function($scope)
{
$scope.MngName='Jade';
$scope.$parent.companyName='Mcommerce';
}
var subController=function($scope)
{
$scope.amName='Jane';
$scope.childController=function($scope,$rootScope)
{
$scope.empName='Scott';
$scope.$parent.dept='Sales';
$scope.comp=$rootScope.companyName;
}
}
var appVar=angular.module('ScopeTest',[]);
</script>
<title>Angular scope chain</title>
</head>
<body ng-app="ScopeTest">
<div ng-controller="mainController">
<table title="ParentTable" border="5px">
<caption>Level1</caption>
<tr>
<td>Manager Name</td>
<td>{{MngName}}</td>
</tr>
<tr>
<td>
<table border="4px" ng-controller="subController">
<caption>Level2</caption>
<tr>
<td>Associate Manager Name</td>
<td>{{amName}}</td>
</tr>
<tr>
<td>Reporting To</td>
<td>{{MngName}}</td>
</tr>
<tr>
<td>Department Assigned at Employee Level</td>
<td>{{dept}}</td>
</tr>
<tr>
<td>
<table border="3px" ng-controller="childController">
<caption>Level3</caption>
<tr>
<td>Employee Name</td>
<td>{{empName}}</td>
</tr>
<tr>
<td>Comp</td>
<td>{{comp}}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
