Currently working through a tutorial with Angular and utilizing this version of the framework: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js[1]
This is my current template setup:
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
Here's how I've structured my controller code:
app.controller('ParentController', function ($scope) {
$scope.person = { greeted: false };
});
app.controller('ChildController', function ($scope) {
$scope.sayHello = function () {
$scope.person = { name: "Ari Lerner", greeted: true };
}
});
Upon testing, I noticed that my code fails to update the template unless I adjust my sayHello method as follows:
$scope.sayHello = function () {
$scope.person.name = "Ari Lerner";
$scope.person.greeted = true;
};
Any thoughts on why this might be happening? I expected changes made to the 'person' object in my controller to reflect in the DOM.
Even after switching to version 1.4.2, the issue persists.
In an attempt to troubleshoot, I experimented with changing the order of properties like so:
$scope.person.name = { greeted: true, name: "Ari Lerner" };
(swapping 'greeted' and 'name')
Could it be possible that Angular is retaining the original object assigned to $scope.person, causing the data binding to break when a new object is set? Just a theory...