当一个对象从另一个对象被复制时，为什么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]; 
}