angular updating a scope object by reference - problems

Question

I am having issues updating a reference of an object: I have a couple of functions that help me edit a user:

function enableEditUser(user) {
            $scope.originalUser = user;
            $scope.editUser = angular.copy(user);
        }

function SaveUserEdits(form) {
            if (form.$valid) {
                $scope.originalUser = angular.copy($scope.editUser);
            }
        }

Everything is working as I would expect. I call enableEditUser(user) from inside an ng-repeat="user in users" and the user gets passed in. When I call SaveUserEdits, the originalUser object does indeed get updated.

I expected that, because $scope.originalUser = user;, that when I update $scope.originalUser the user in users would also be updated (since I thought they were both references to the same object). However, (using ng-inspect) I see that while $scope.originalUser is updated, user is not updated.

Thanks in advance

Is each form within the ng-repeat?

KnowHowSolutions
– KnowHowSolutions

2015-04-20 23:24:41 +00:00
Commented Apr 20, 2015 at 23:24 — KnowHowSolutions
– KnowHowSolutions, Commented Apr 20, 2015 at 23:24

Alex Soroka · Accepted Answer · 2015-04-21 12:29:57Z

4

You need change

// In this case you have lost reference to user object
$scope.originalUser = angular.copy($scope.editUser);

to:

angular.extend($scope.originalUser, $scope.editUser)

Explaining angular.copy:

var user = {name: 'John', age: 30},
        editUser, originalUser;
originalUser = user;
console.log(originalUser); // => {name: 'John', age: 30}
user === originalUser; // => true
editUser = angular.copy(user);
console.log(editUser); // => {name: 'John', age: 30}
user === editUser; => false
angular.extend(originalUser, editUser);
originalUser === user; // => true;
editUser === angular.copy(editUser); // => false
originalUser = angular.copy(editUser); // you have overwritten the reference to user with reference to new object angular.copy(editUser). Hence you have lost you reference to user.
originalUser === user; // => false;

Simplest version of angular.copy and angular.extend:

function copy(src) {
   var newObject = {};
   Object.keys(src).forEach(function(key) {
       newObject[key] = src[key];
   })
   return newObject;
}

function extend(dst, src) {
   Object.keys(src).forEach(function(key) {
       dst[key] = src[key];
   })
   return dst;
}

// do not use this functions only for explaining

edited Apr 21, 2015 at 12:29

answered Apr 20, 2015 at 23:30

Alex Soroka

81010 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pQuestions123 Over a year ago

Can you expand on this? Why does the second work and not the first?

pQuestions123 Over a year ago

I guess I don't. I come from .NET. I haven't been using angular (or even JS) very long. I guess I just assumed that copy was similar to .NET's clone and that if I assigned one object to another it is passed by reference.

pQuestions123 Over a year ago

I mean, I was trying to assign a copy of the editUser object to the originalUser object. I just don't understand why user and originalUser don't point to the same object, so that, when I change one I change the other.

Collectives™ on Stack Overflow

angular updating a scope object by reference - problems

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related