
Nested Controller in Angualr JS
<html>
<head lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('app', []);
angular.module('app').controller("MainController", function($scope){
$scope.title = 'I am Parent Controller Title';
});
angular.module('app').controller("SubController", function($scope){
$scope.title = 'I am Sub-Controller Title';
});
</script>
</head>
<body ng-app='app' ng-controller='MainController'>
<div class='container'>
<p style="color:Red">Angular JS Main Controller - {{title}}</p>
<div ng-controller='SubController'>
<p style="color:green">
Angular JS SUB Controller - {{title}}</p>
<p style="color:blue">Angular JS Call Main Controller object inside child controller - {{$parent.title}}</p>
</div>
</div>
</body>
</html>
Output of nested controller example in Angualr JS
Angular JS Main Controller - I am Parent Controller Title
Angular JS SUB Controller - I am Sub-Controller Title
Angular JS Call Main Controller object inside child controller - I am Parent Controller Title
0 comments:
Post a comment