Recently delving into the world of angularjs, I encountered something perplexing that seemed like a glitch in the controller hierarchy when it comes to accessing the parent scope. Here are two code snippets that I believed should both function properly based on the principle of accessing the parent scope but...
1) The following snippet works as expected:
<body data-ng-app>
<div data-ng-controller="ctrl1">
Greeted : {{first.greeted}}
<div data-ng-controller="ctrl2">
<a href="#" data-ng-click="sayClick()">Click To Greet</a>
</div>
</div>
<script>
function ctrl1($scope){
$scope.first = {greeted: "No"};
}
function ctrl2($scope){
$scope.sayClick= function(){
$scope.first.greeted = "Yes";
}
}
</script>
</body>
2) However, this one does not work:
<body data-ng-app>
<div data-ng-controller="ctrl1">
Greeted : {{first}}
<div data-ng-controller="ctrl2">
<a href="#" data-ng-click="sayClick()">Click To Greet</a>
</div>
</div>
<script>
function ctrl1($scope){
$scope.first = "No";
}
function ctrl2($scope){
$scope.sayClick= function(){
$scope.first = "Yes";
}
}
</script>
</body>
I'm struggling to understand what differs between the two and why the second one fails to work. Any insights would be greatly appreciated!