Угловое непреднамеренное связывание/зеркальное отображение объектов

Question

Итак, я работаю над проектом с использованием AngularJS, где мне нужно иметь возможность сравнивать значения объекта в области с ранее записанными значениями. Я делаю это с помощью алгоритма, такие, как показано ниже:

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

Теперь, если бы я сделать:

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

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

Он будет:

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

Мое предположение, что AngularJS автоматически связывает две цели target и oldTarget и зеркалирует любые изменения, сделанные для цели на oldTarget. Так ли это, и если да, то в любом случае я должен предотвратить это? Если нет, что я делаю, это заставляет это делать это?

Answer 1

Это не связано с Угловое, это поведение по умолчанию JavaScript. Вы ссылаетесь на один и тот же объект. Если вы намерены изменить его без изменения источника, вам нужно клонировать объект.

Посмотрите:

• What is the most efficient way to clone an object?
• Most elegant way to clone a JavaScript object

Answer 2

Я предполагаю, что это не угловое, это как раз то, как это работает, потому что $ scope.oldTarget и $ scope.target - это ссылки на один и тот же объект.

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

Th выход: "Объект {Foo: "изменил"}"

http://jsfiddle.net/rf0ac6zf/

Answer 3

Похоже, ваш элемент массива на который ссылается "по ссылке". Поэтому создайте новые экземпляры элемента следующим образом:

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