Please enable Javascript to correctly display the contents on Dot Net Tricks!

Understanding scope inheritance in AngularJS

 Print 
  Author : Shailendra Chauhan
Posted On : 29 Dec 2014
Total Views : 9,845   
Updated On : 26 Sep 2016
 

The $scope object used by views in AngularJS are organized into a hierarchy. There is a root scope, and the $rootScope can has one or more child scopes. Each controller has its own $scope (which is a child of the $rootScope), so whatever variables you create on $scope within controller, these variables are accessible by the view based on this controller.

For example, suppose you have two controllers: ParentController and ChildController as given below:

<!DOCTYPE html>
<html>
<head>
 <title>Angular Scope Inheritance</title>
 <script src="lib/angular.js"></script>
 <script>
 var app = angular.module('ScopeChain', []);

 app.controller("parentController", function ($scope) {
 $scope.managerName = 'Shailendra Chauhan';
 $scope.$parent.companyName = 'Dot Net Tricks'; //attached to $rootScope
 });
 app.controller("childController", function ($scope, $controller) {
 $scope.teamLeadName = 'Deepak Chauhan';
 });
 </script>
</head>
<body ng-app="ScopeChain">
 <div ng-controller="parentController ">
 <table style="border:2px solid #e37112">
 <caption>Parent Controller</caption>
 <tr>
 <td>Manager Name</td>
 <td>{{managerName}}</td>
 </tr>
 <tr>
 <td>Company Name</td>
 <td>{{companyName}}</td>
 </tr>
 <tr>
 <td>
 <table ng-controller="childController" style="border:2px solid #428bca">
 <caption>Child Controller</caption>
 <tr>
 <td>Team Lead Name</td>
 <td>{{ teamLeadName }}</td>
 </tr>
 <tr>
 <td>Reporting To</td>
 <td>{{managerName}}</td>
 </tr>
 <tr>
 <td>Company Name</td>
 <td>{{companyName}}</td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 </div>
</body>
</html>

How it works...

What do you think?

I hope you will enjoy the AngularJS scope hierarchy while developing your app with AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.



Free Interview Books
 
COMMENTS
14 OCT
Angular2 and Angular4 (Online)
03:00 PM-05:00 PM IST (+5.30GMT)
12 OCT
ASP.NET Core (Online)
09:00 PM - 11:00 PM IST(+5:30 GMT)
10 OCT
Microsoft Azure Infrastructure Solutions (Online)
08:00 AM-09:30 AM IST / 09:30 PM -11:00 PM CST
30 SEP
Angular2 and Angular4 (Classroom)
08:30 AM-11:30 AM IST
20 SEP
MEAN Stack (Online)
07:00 AM-09:00 AM IST
20 SEP
ASP.NET MVC with Angular4 (Online)
9:00PM- 11:00PM IST(+5:30GMT)
16 SEP
Angular2 and Angular4 (Online)
08:00 AM-10:00 AM IST(+5.30 GMT)
22 AUG
ASP.NET Core with Angular4 (Online)
07:00 AM - 9:00 AM IST(+5:30 GMT)
LIKE US ON FACEBOOK
 
+