Looking at my object, it appears as follows:
$scope.user = {key: 'j16er48', name: 'Foo', title: 'Bar'}
The template being used is:
<div ng-if="user.key">{{user.name}}</div>
If I directly change the value of the key> property to null or false, the div does not display. However, if I replace the entire object with this:
$scope.user = {key: false, name: 'Foo', title: 'Bar'}
Nothing seems to happen. It appears that Angular continues to monitor the original object and the initial value of the key property.
I attempted using $scope.$apply() after setting a new object for user, but it had no effect.
Is there something I am overlooking?
== UPDATE ==
After numerous tests, I came across an unusual occurrence within the Angular scope. The problem arises from an unintended reference assignment (or possibly a two-way binding).
I have an object named defaultUser defined as:
{key: false, name: 'Foo', title: 'Bar'}var defaultUser = {key: false, name: null, title: null};
$scope.user = defaultUser;
// modifying a property of $scope.user
$scope.user.key = 'j16er48';
$scope.resetUser = function(){
// At this point, defaultUser.key now equals 'j16er48'
alert(defaultUser.key);
// This line has no effect because of the above
$scope.user = defaultUser;
}
Hence, when attempting to assign defaultUser back to the user object, it seemed like a reset, however, defaultUser had been altered and was now equivalent to user.
Is this behavior normal? Does Angular assume all assignments are by reference? Could this be due to a two-way binding mechanism? Am I missing something here?