AngularJS Tutorial - Map controller hierarchy to DOM tree

We can create controller in hierarchy and access the properties from the parent controller. The hierarchy maps naturally to the DOM tree.

Example

The following code shows how to map controller hierarchy to DOM tree.


<!-- Revised from http://jsbin.com/URuyoG/1/edit -->
<!doctype html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
  <style>
    #parentCtrl {<!-- w w  w.  j  a v  a 2s  . co  m-->
      background-color: yellow;
      padding: 10px;
    }
    #childCtrl {
      background-color: green;
      padding: 10px;
    }
  </style>
</head>
<body>
  <p>We can access: {{ rootProperty }}</p>
  <div id="parentCtrl" ng-controller="ParentCtrl">
    <p>We can access: {{ rootProperty }} and {{ parentProperty }}</p>
    <div id="childCtrl" ng-controller="ChildCtrl">
      <p>
        We can access:
        {{ rootProperty }} and
        {{ parentProperty }} and
        {{ childProperty }}
      </p>
      <p>{{ fullSentenceFromChild }}</p>
    </div>
  </div>

  <script>
    angular.module('myApp', [])
    .run(function($rootScope) {
      // use .run to access $rootScope
      $rootScope.rootProperty = 'root scope';
    })
    .controller('ParentCtrl', function($scope) {
      // use .controller to access properties inside `ng-controller`
      // in the DOM omit $scope, it is inferred based on the current controller
      $scope.parentProperty = 'parent scope';
    })
    .controller('ChildCtrl', function($scope) {
      $scope.childProperty = 'child scope';
      // we can access any of the properties in the
      // prototype chain directly from the current $scope
      $scope.fullSentenceFromChild = 'Same $scope: We can access: ' +
                                     $scope.rootProperty + ' and ' +
                                     $scope.parentProperty + ' and ' +
                                     $scope.childProperty
    });
  </script>

</body>
</html>

The code above is rendered as follows: