當一個對象從另一個對象被複制時，爲什麼Angular不能數據綁定數據？

Question

我創建了一個簡單的jsfiddle來說明我的問題：

fiddle

HTML：

<div ng-controller="MyCtrl"> 
    <div ng-repeat="p in products"> 
     <span ng-click="overwrite(p)">{{ p.id }}: {{ p.name }}</span> 
    </div> 
</div> 

的Javascript：

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 

    var products = [{id:1, name:'first'}, {id:2, name:'second'}]; 
    $scope.products = products; 

    var prod = {id: 3, name:'third'}; 

    $scope.overwrite = function(p){ 
     p.id = 4; 
     p.name = 'forth'; 

     p = prod; // this doesn't work nor does angular.copy(prod) 
    } 
} 

正如你可以看到，當我設置手動屬性，值是綁定的。但是當我覆蓋一個對象時，沒有任何反應。這怎麼可能？當我想恢復處於原始狀態的對象時，我需要做些什麼？

想象一下，我使用var productBackup = angular.copy(product)創建備份對象。然後我對原始產品進行更改，稍後我決定取消更改。我想用product = productBackup來做這個。但是這不起作用！在這種情況下，是否需要像這樣手動設置所有屬性？

product.id = productBackup.id; 
product.name = productBackup.name; 
etc... 

Answer 1

如果使用angular.copy(source, destination)你能達到desiered效果。

updated fiddle

正在發生的事情是角度還是看你做任務即使在原p參考。如果您使用angular.copy()，則您正在將prod中的值複製到p角度正在正確觀察。

我問了一個similar question，但它在共享服務中處理了這個問題。

Answer 2

我從來沒有與AngularJS工作過，但我覺得這是怎麼回事是你的參數p是不是你簡單的鍵/值對象，但更復雜的AngularJS對象。通過將prod賦值給它，您將覆蓋它而不是更改對象的特定部分。

也許下面的代碼片段將幫助你：

for(var key in prod) { 
    p[key] = prod[key]; 
}