Here, the author mentions
the $scope object used by the two controllers are not the same $scope object
Snippet for the same:
Now consider a little modification to the above code.
<body ng-app="myapp">
<div ng-controller="myController1">
<div>{{data.theVar}}</div>
<div>{{datamon}}</div>
<div ng-controller="myController2">
<div>{{data.theVar}}</div>
<div>{{datamon}}</div>
<div>{{temp}}</div>
<div>{{newTemp}}</div>
</div>
</div>
<script>
var module = angular.module("myapp", []);
var myController1 = module.controller("myController1", function($scope) {
$scope.data = {
theVar : "Value One",
mon : "mon Value"
};
$scope.temp = "John Wick 2 is going to be released soon";
});
var myController2 = module.controller("myController2", function($scope) {
$scope.data = {
theVar : "Value Two"
};
$scope.newTemp = $scope.temp;
console.log("");
});
</script>
</body>
The view corresponding to controller2 has been moved inside the view for controller1.
For this piece of code inside the controller2,
$scope.newTemp = $scope.temp;
Are $scope highlighted above one and the same object?
If yes, how does AngularJS know this?
Had they been same, $scope.temp in controller2 would be undefined and so then $scope.newTemp?
For me, they are not the same, considering the o/p of the above program. See below:
But then, I am perplexed as to why they both es out to be one & the same when I debug,
How does AngularJS able to access value of $scope.temp from controller1 in controller2?
Please clarify?
Lastly,
Here, the author mentions
the $scope object used by the two controllers are not the same $scope object
Snippet for the same:
Now consider a little modification to the above code.
<body ng-app="myapp">
<div ng-controller="myController1">
<div>{{data.theVar}}</div>
<div>{{data.mon}}</div>
<div ng-controller="myController2">
<div>{{data.theVar}}</div>
<div>{{data.mon}}</div>
<div>{{temp}}</div>
<div>{{newTemp}}</div>
</div>
</div>
<script>
var module = angular.module("myapp", []);
var myController1 = module.controller("myController1", function($scope) {
$scope.data = {
theVar : "Value One",
mon : "mon Value"
};
$scope.temp = "John Wick 2 is going to be released soon";
});
var myController2 = module.controller("myController2", function($scope) {
$scope.data = {
theVar : "Value Two"
};
$scope.newTemp = $scope.temp;
console.log("");
});
</script>
</body>
The view corresponding to controller2 has been moved inside the view for controller1.
For this piece of code inside the controller2,
$scope.newTemp = $scope.temp;
Are $scope highlighted above one and the same object?
If yes, how does AngularJS know this?
Had they been same, $scope.temp in controller2 would be undefined and so then $scope.newTemp?
For me, they are not the same, considering the o/p of the above program. See below:
But then, I am perplexed as to why they both es out to be one & the same when I debug,
How does AngularJS able to access value of $scope.temp from controller1 in controller2?
Please clarify?
Lastly,
Share Improve this question edited Feb 10, 2016 at 7:21 Farhan stands with Palestine asked Feb 10, 2016 at 7:10 Farhan stands with PalestineFarhan stands with Palestine 14.1k14 gold badges66 silver badges110 bronze badges 02 Answers
Reset to default 10Altough it's true that the $scope used in two controllers are not the same, they can inherit eachother's properties. Angular's $scopes are like a tree, the trunk is the $rootScope and every other $scope branches from that or another $scope, so since your myController2 is a child of myController1 you can access the variables in it.
$rootScope -> myController1 -> myController2
The myController2 can access all the parent $scopes, the myController1 can access $rootScope and the $rootScope can only access itself.
For your last part, as both controllers have property by name data, angular will look into current scope first and then hierarchically move up i.e. parent's scope. Therefore, angular founds data in second controller's scope itself and hence need not refer parent's scope data variable. But there is no mon key inside that property and hence does not output anything out.
Do look into controller as syntax of angular, it is meant to keep these conflicts at bay.