Post
Ask Question

Scope Inheritance - Master/Parent Child Controller In Angular

 
In this article, we will discuss about Angular scope, controller and scope inheritance which is always chaos for many developers.

In terms of AngularJs, a controller is a JavaScript constructor function that is used to enhance the AngualarJs Scope. AngularJs Controller is defined using the ng-controller directive, which is used to control the flow of data in the application. AngularJS application completely relies on controllers for handling data. Generally, a controller holds only the business logic needed for a single view.
 
Controllers are used to basically control the data in any MVC pattern application, In same way with AngularJS Controller control the flow of data in the application.
 
Today, we will delve into the parent-child controller relationship or scope inheritance and passing data among controllers of AngularJS. There are several cases where we might need to pass data among the controllers, as it is a common requirement of any application.
 
For every controller with ng-controller directive in AngularJS, it creates a new child scope and then forms a hierarchy of scopes that can inherit from each other. The $scope that each controller receives will have access to properties and methods defined by controllers higher up the hierarchy.
 
In other words, every child controller will have access to its parents $scope or any upper-level controller. However, rootscope can be access by every controllers.
 
Let us depict this with an illustration. 
 
 
In the above image, there are 4 controllers. Their hierarchy is as shown below,
  • Parent Controller >> Child A Controller
  • Parent Controller >> Child B Controller >> GrandChild Controller
  • Child A and Child B can access the methods and properties with $scopes of Parent Controller. However, Child A and Child B will not be able to share their $scopes under this concept.
  • Similarly, GrandChild Controller will be able to access the $scope of Child B and Parent Controller as they are at higher level of this controller.
Additionally, each and every child controller (inner) can manipulate the $scope of the parent controller (upper).
 
Sample Code
 
App.js
  1. (function(angular) {    
  2.   'use strict';    
  3. var rijapp = angular.module('parentChild', []);    
  4. rijapp.controller('ParentController', ['$scope', function($scope) {    
  5.   $scope.name = 'Parent';    
  6.   $scope.shareparentname = "Hey, This is from Parent";    
  7. }]);    
  8. rijapp.controller('ChildAController', ['$scope', function($scope) {    
  9.   $scope.name = 'Child A';    
  10. }]);    
  11. rijapp.controller('ChildBController', ['$scope', function($scope) {    
  12.   $scope.name = 'Child B';    
  13.   $scope.sharechildname = "Hey, This is from Child B";    
  14. }]);    
  15. rijapp.controller('GrandChildController', ['$scope', function($scope) {    
  16.   $scope.name = 'Grand Child';    
  17. }]);    
  18. })(window.angular);    
Index.html
  1. <!doctype html>        
  2. <html lang="en">        
  3. <head>        
  4.   <meta charset="UTF-8">        
  5.   <title>Example - Master/Parent Child Controller</title>        
  6.   <link href="app.css" rel="stylesheet" type="text/css">        
  7.   <script src="//code.angularjs.org/snapshot/angular.min.js"></script>        
  8.   <script src="app.js"></script>        
  9.   <style>        
  10.     div.divider div {        
  11.       padding: 10px;        
  12.       border: solid 2px blue;        
  13.     }        
  14.     </style>        
  15. </head>        
  16. <body ng-app="parentChild">        
  17.   <div class="divider">        
  18.   <div ng-controller="ParentController">        
  19.     <p>{{name}}!</p>        
  20.     <p>{{shareparentname}}!</p>        
  21.     <div ng-controller="ChildAController">        
  22.           <p>{{name}}!</p>           
  23.            <p>{{shareparentname}}!</p>               
  24.         </div>        
  25.     <div ng-controller="ChildBController">        
  26.       <p> {{name}}!</p>        
  27.       <p>{{shareparentname}}!</p>        
  28.       <div ng-controller="GrandChildController">        
  29.         <p>{{name}}!</p>        
  30.         <p>{{sharechildname}}!</p>        
  31.       </div>        
  32.     </div>        
  33.   </div>        
  34. </div>        
  35. </body>        
  36. </html>  
Output 
 
 
Explanation
 
In the app.js file, $scope.name is a parent $scope and is used in every controller with a different value which means parent $scope can be used and manipulated by any child controller. The $scope that each Controller receives will have access to properties and methods defined by Controllers higher up the hierarchy. We can also use parent $scope as it is.
 
However, Child to Parent, which is uncommon, can be achieved through service (shared) and $emit. Services are used to share code across an app. $emit sends an event upwards from the current component to all parent components and any data associated with that event.
 

Conclusion

 
To sum up this article, every child controller will have access to the parent controller $scope and can manipulate it.
 
Best Regards!!


Similar Articles