为什么当一个对象从另一个对象复制不角不数据绑定数据？ [英] Why does Angular not databind data when an object is copied from another object?

问题描述

我创建了一个简单的jsfiddle来说明我的问题：

小提琴

HTML：

 ＆LT; D​​IV NG控制器=MyCtrl＆GT;
    ＆LT; D​​IV NG重复=p在产品＆GT;
        ＆LT;跨度NG点击=覆盖（P）＆GT; {{p.id}} {{p.name}}＆LT; / SPAN＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

使用Javascript：

  VAR对myApp = angular.module（'对myApp'，[]）;功能MyCtrl（$范围）{    VAR产品= {[ID：1，名称：'第一'}，{ID：2，名称：'第二个'}];
    $ scope.products =产品;    VAR督促= {ID：3，名称：'第三'};    $ scope.overwrite =功能（P）{
        p.id = 4;
        p.name ='提出';        P = PROD; //这不工作也没有angular.copy（正式版）
    }
}
 

正如你可以看到，当我设置手工的属性，值绑定。但是，当我改写的对象，没有任何反应。这怎么可能？什么做我必须做的，当我想在它的原始状态，恢复一个对象？

想象我创建一个使用备份对象 VAR productBackup = angular.copy（产品）。然后，我修改了原有的产品，后来我决定要取消我的变化。我想做到这一点使用产品= productBackup 。但是，这并不工作！在这种情况下，我需要通过手工来设置所有属性这样？

  product.id = productBackup.id;
product.name = productBackup.name;
等等...
 

解决方案

如果您使用 angular.copy（源，目的地）您能够达到desiered效果。

更新小提琴

正在发生的事情是，棱角分明还在看着你做任务即使在原始的 P 引用。如果你使用 angular.copy（）您从刺复制值 P 这角度是否正确观看。

我问了一个<一个href=\"http://stackoverflow.com/questions/16465292/dirty-checking-with-shared-service-between-controllers-one-way-works-the-other\">similar问题但它在共享服务处理这个问题。

I've created a simple jsfiddle to illustrate my question:

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

As you can see, when I set the properties by hand, the values are bind. But when I overwrite an object, nothing happens. How is this possible? And what do I have to do when I want to restore an object in it's original state?

Imagine I create a backup object using var productBackup = angular.copy(product). Then I make changes to the original product and later I decide to cancel my changes. I want to do this using product = productBackup. But this doesn't work! In this case, do I need to set all the properties by hand like this?

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

解决方案

If you use angular.copy(source, destination) you are able to achieve the desiered effect.

updated fiddle

What is happening is that angular is still watching the original p reference even after you do the assignment. If you use angular.copy() you are copying the values from prod to p which angular is watching correctly.

I asked a similar question but it dealt with this issue in a shared service.

这篇关于为什么当一个对象从另一个对象复制不角不数据绑定数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！