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

Understanding scope inheritance in AngularJS

  Author : Shailendra Chauhan
Posted On : 29 Dec 2014
Total Views : 6,994   
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 (0)
9 MAR
ASP.NET MVC with Angular2 Development (Online)

09:00 PM - 11:00 PM IST( TUS, THR, SAT)

Know More
6 MAR
Master Class Fast Track MVC 5 with Angular2 Development (Online)

10:30 AM -03:30 PM IST (Fast Track)

Know More
6 MAR
Angular 2 Master Class Fast Track Online Development Training (Online)

10:30 AM- 01:30 PM IST

Know More
27 FEB
ASP.NET MVC with Angular2 Development (Online)

07:00 AM - 09:00 AM IST( MON, WED, FRI)

Know More
25 FEB
ASP.NET MVC with Angular2 Development (Classroom)

05:00 PM-06:30 PM

Know More
25 FEB
Xamarin Forms : Build Cross-platform Apps (Classroom)

8:00 AM-9:30 AM

Know More
25 FEB
ASP.NET MVC with Angular2 Development (Classroom)

3:00 PM-4:30 PM

Know More
14 FEB
.NET Development (Classroom)

11:00 AM-12:00 PM

31 JAN
ASP.NET MVC with Angular2 Development (Online)

07:00 AM-09:00 AM IST(Tuesday & Thursday)

30 JAN
NODEJS & MEAN Stack 2.x Development (Online)

09:00 PM-11:00 PM IST( MON, WED, FRI)

15 JAN
PPC Marketing (Classroom)

04:00 PM-05:30 PM

10 JAN
ASP.NET MVC with AngularJS Development (Online)

09:00 PM-11:00 PM IST on (TUE, THRU,SAT)

31 DEC
ASP.NET MVC with AngularJS Development (Classroom)

09:30 AM-11:00 AM

5 NOV
ASP.NET MVC with AngularJS Development (Classroom)

08:00 AM-09:30 AM

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 

Professional Speaks

+