Scope Inheritance in Controller Method of AngularJS

Introduction

In my previous articles I told you about:

This article exlains Scope Inheritance in a Controller Method of AngularJS.

Controllers can be assigned to any number of DOM hierarchies and we know that Controllers are assigned using the ng-controller. Now what ng-controller does is it creates a new child scope each time it is used so in this way a hierarchy of scopes is created that can be inherited from each other. Here parent-child relationships exist, since each child can access its Parent's Properties and Methods so in a similar manner each $scope received by the Controller can access the Properties and Methods that are defined in it's parent or Grand Parent Controller.

Now I will create an example from which you can easily understand how this concept is working.

Step 1

This code will be written in the Head Section and in the Script Tag:

var mod = angular.module('testmod', []);

mod.controller('maincarcontrol',['$scope',function ($scope) {

$scope.name = 'Anubhav';

$scope.cartest = 'Awesome';

}]);

mod.controller('childcarcontrol', ['$scope', function ($scope) {

$scope.name = 'Mohit';

}]);

mod.controller('grandchildcarcontrol', ['$scope', function ($scope) {

$scope.name = 'Anshika';

$scope.cartest = 'perfect';

}]);

</script>

Here first I have created an object of angular.module as mod, then I created the first controller method of this Angular Module and named it as "maincarcontrol", in this controller some initial values are assigned to the $scope.

Then the second controller method is created named "childcarcontrol", in this controller only one initial value is assigned in other words value is assigned to name only and not to cartest.

At the end one more controller is created and named as "grandchildcarcontrol", here again two initial values are defined that are totally different from the first and second.

Step 2

Now we will work on the View part of this application.

Write this code in the Body section:

<body>

<p>{{name}} says that control of this car is {{cartest}}</p>

<p>{{name}} says that control of this car is {{cartest}}</p>

<p>{{name}} says that control of this car is {{cartest}}</p>

</div>

</body>

Here first a main div is created named "maindiv". In this main div three divs are also created that are created in one another and a different controller is assigned to each Div.

In all three divs you can see that a different controller is assigned but similar coding is provided, you will see that the similar code gives different results for all the divs.

Now our application is created and is ready to be executed.

Complete Code of this application is as follows:

<head>

var mod = angular.module('testmod', []);

mod.controller('maincarcontrol',['$scope',function ($scope) {

$scope.name = 'Anubhav';

$scope.cartest = 'Awesome';

}]);

mod.controller('childcarcontrol', ['$scope', function ($scope) {

$scope.name = 'Mohit';

}]);

mod.controller('grandchildcarcontrol', ['$scope', function ($scope) {

$scope.name = 'Anshika';

$scope.cartest = 'perfect';

}]);

</script>

<style>

div.main div {

padding: 15px;

border: 1px solid black;

}

</style>

</head>

<body>

<p>{{name}} says that control of this car is {{cartest}}</p>

<p>{{name}} says that control of this car is {{cartest}}</p>

<p>{{name}} says that control of this car is {{cartest}}</p>

</div>

</body>

</html>

Output

Scope Inheritance in Controller Method of AngularJS

Here you can see that in the first div Anubhav and Awesome are used that were the initial value in maincarcontrol but in the second div Mohit and Awesome are used, Mohit was declared as the initial value but Awesome was not declared, it is still showing it, that's because it is inherited from it's parent controller.

In the third div again various values are shown, that's because they were declared in grandchildcarcontrol.

So, if the child control has it's own values then they will hide the parent properties and methods.