Inheritance of $scope object in angularJs

Question

I am learning AngularJS. I am confused about the inheritance of $scope object. Like i hope $scope object is specific to a controller. How it inherits values to the other controllers. Code below is taken from official documentation

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example9-production</title>
  <link href="app.css" rel="stylesheet" type="text/css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
  <script src="app.js"></script>    
</head>
<body ng-app="scopeInheritance">
  <div class="spicy">
  <div ng-controller="MainController">
    <p>Good {{timeOfDay}}, {{name}}!</p>

    <div ng-controller="ChildController">
      <p>Good {{timeOfDay}}, {{name}}!</p>

      <div ng-controller="GrandChildController">
        <p>Good {{timeOfDay}}, {{name}}!</p>
      </div>

        <div ng-controller="GrandChildController2">
        <p>Good {{timeOfDay}}, {{name}}!</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

App.js

(function(angular) {
  'use strict';
var myApp = angular.module('scopeInheritance', []);
myApp.controller('MainController', ['$scope', function($scope) {
  $scope.timeOfDay = 'morning';
  $scope.name = 'Nikki';
}]);
myApp.controller('ChildController', ['$scope', function($scope) {
   $scope.timeOfDay = 'morning2';
  $scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController', ['$scope', function($scope) {
  $scope.timeOfDay = 'evening';
  $scope.name = 'Gingerbread Baby';
}]);
myApp.controller('GrandChildController2', ['$scope', function($scope) {

}]);
})(window.angular);

The GrandChildController2 controller did not change the name and timeOfDay property of $scope object. I expect the output should be like timeOfDay ='evening' and name = 'Gingerbread Baby' if it inherits from parent. But surprisingly the output of GrandChildController2 controller is timeOfDay ='Good morning2' and name ='Mattie'. How is this possible?

Could you please explain

Thanks Manivannan

Giuseppe Ricupero · Accepted Answer · 2015-12-16 20:15:05Z

As can you see in the following schema GrandChildController and GrandChildController2 are brothers and both sons of ChildController (as the their name suggests).

  <div ng-controller="MainController">
  |
  |-- <p>Good {{timeOfDay}}, {{name}}!</p>       <!-- Good morning, Nikki'! -->
  |
  |   <!-- inherits from MainController and then overwrite -->
  |-- <div ng-controller="ChildController">
      |-- <p>Good {{timeOfDay}}, {{name}}!</p>   <!-- Good morning2, Mattie! -->
      |
      |   <!-- inherits from ChildController and then overwrite -->
      |-- <div ng-controller="GrandChildController">
      |     <p>Good {{timeOfDay}}, {{name}}!</p> <!-- Good evening, Gingerbread Baby! -->
      |-- </div>
      |
      |   <!-- inherits from ChildController and does NOT overwrite -->
      |-- <div ng-controller="GrandChildController2">
      |     <p>Good {{timeOfDay}}, {{name}}!</p> <!-- Good morning2, Mattie! -->
      |-- </div>
      |
  |-- </div>  <!-- CLOSE ChildController -->
  </div>  <!-- CLOSE MainController -->

So GrandChildController2 inherits the $scope from its parent ChildController with $scope.timeOfDay = 'morning2' and $scope.name = 'Mattie'.

WHAT YOU EXPECTED

To obtain the behaviour you expected (GrandChild2 inherits from GrandChild) the schema has to be like this:

  <div ng-controller="MainController">
  |
  |-- <p>Good {{timeOfDay}}, {{name}}!</p>       <!-- Good morning, Nikki'! -->
  |
  |   <!-- inherits from MainController and then overwrite -->
  |-- <div ng-controller="ChildController">
      |-- <p>Good {{timeOfDay}}, {{name}}!</p>   <!-- Good morning2, Mattie! -->
      |
      |   <!-- inherits from ChildController and then overwrite -->
      |-- <div ng-controller="GrandChildController">
          |-- <p>Good {{timeOfDay}}, {{name}}!</p> <!-- Good evening, Gingerbread Baby! -->
          |
          |   <!-- inherits from GrandChildController and does NOT overwrite -->
          |-- <div ng-controller="GrandChildController2">
          |     <p>Good {{timeOfDay}}, {{name}}!</p> <!-- Good evening, Gingerbread Baby! -->
          |-- </div>
          |
      |-- </div>  <!-- CLOSE GrandChildController -->
  |-- </div> <!-- CLOSE ChildController -->
  </div> <!-- CLOSE MainController -->

sirrocco · Accepted Answer · 2015-12-16 10:36:25Z

0

GrandChildController2 is inheriting from ChildController so that's the reason for the output.

Maybe the formatting mislead you?

answered Dec 16, 2015 at 10:36

sirrocco

8,0294 gold badges63 silver badges83 bronze badges

1 Comment

Mani Over a year ago

Hi @sirrocco.. Thanks for you reply but i don't understand how you are saying GrandChildController2 is inheriting from ChildController ?

Nagarjuna Reddy · Accepted Answer · 2015-12-16 11:03:20Z

0

You are missing </div> for ChildController. So, it is considering that scope values.

Try this:

    <body ng-app="scopeInheritance">
  <div class="spicy">
  <div ng-controller="MainController">
    <p>Good {{timeOfDay}}, {{name}}!</p>

    <div ng-controller="ChildController">
      <p>Good {{timeOfDay}}, {{name}}!</p>

      <div ng-controller="GrandChildController">
        <p>Good {{timeOfDay}}, {{name}}!</p>     

        <div ng-controller="GrandChildController2">
        <p>Good {{timeOfDay}}, {{name}}!</p>
      </div>
    </div>
  </div>
</div>
</div>
</body>

answered Dec 16, 2015 at 11:03

Nagarjuna Reddy

4,19514 gold badges47 silver badges87 bronze badges

Collectives™ on Stack Overflow

Inheritance of $scope object in angularJs

App.js

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

App.js

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related