Angular unintentional binding/object mirroring

Question

So I am working on a project using AngularJS where I need to be able to compare the values of an object in the scope with it's previously recorded values. I'm doing this through an algorithm such as the one below:

function() {
    var data = [
        { id: 1, key: 'value', foo: 'bar'},
        { id: 2, key: 'value', foo: 'bar'}
    ]
    $scope.oldTarget = data[0];
    $scope.target = data[0];
}

Now if I were to do:

function() {
    $scope.target.foo = 'fighters';

    if ($scope.target != $scope.oldTarget) console.log('Target was modified');
    console.log($scope.target);
    console.log($scope.oldTarget);
}

It will output:

{ id: 1, key: 'value', foo: 'fighters'}
{ id: 1, key: 'value', foo: 'fighters'}

My assumption is that AngularJS is automatically binding the two variables target and oldTarget and mirroring any changes done to target to oldTarget. Is this the case, and if so, is there anyway for me to prevent this? If not, what am I doing that's causing it to do this?

score 1 · Answer 1 · answered Nov 25 '14 at 14:10

1

I assume that this is not angular, this is just how it works, because $scope.oldTarget and $scope.target both is links to the same object.

var test = {foo : 'bar'};
var newTest = test;
newTest.foo = 'changed';
console.log(test);

Th output is: "Object {foo: "changed"}"

http://jsfiddle.net/rf0ac6zf/

answered Nov 25 '14 at 14:10

Rasalom

3,101
3
21
29

So you can try using angular.copy(data) to prevent this. – Rasalom Nov 25 '14 at 14:16

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

This is not related to Angular, it's default JavaScript behavior. You are referencing the same object. If you intend to modify it without changing the source, you need to clone the object.

Take a look:

edited May 23 '17 at 12:05

Community

1
1

answered Nov 25 '14 at 14:16

Thiago Negri

5,221
2
28
39

score 0 · Answer 3 · answered Nov 25 '14 at 14:18

0

Looks like your array element is being referenced "by reference". So create new instances of the element like this:

$scope.oldTarget = $.extend(null,data[0]);
$scope.target = $.extend(null,data[0]);

answered Nov 25 '14 at 14:18

MarzSocks

4,229
3
22
35

Angular unintentional binding/object mirroring

3 Answers3