javascript - 当一个对象从另一个对象复制时，为什么 Angular 不数据绑定(bind)数据？

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)
    }
}

如您所见，当我手动设置属性时，值是绑定(bind)的。但是当我覆盖一个对象时，什么也没有发生。这怎么可能？当我想将对象恢复到原始状态时，我必须做什么？

假设我使用 var productBackup = angular.copy(product) 创建了一个备份对象。然后我对原始产品进行了更改，后来我决定取消我的更改。我想使用 product = productBackup 执行此操作。但这不起作用!在这种情况下，我是否需要像这样手动设置所有属性？

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

Answer 1

如果你使用 angular.copy(source, destination) 你可以达到预期的效果。

updated fiddle

发生的事情是，即使在您完成分配后，angular 仍在监视原始 p 引用。如果您使用 angular.copy()，您会将值从 prod 复制到 p，angular 正在正确观察。

我问了一个similar question但它在共享服务中处理了这个问题。