Map controller hierarchy to DOM tree
Description
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 {<!--from w w w . j a v a2 s .c o 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>