AngularJS是交叉绑定变量

Question

我通过使用承诺下载JSON数据并将其存储在变量中来开始我的Angular控制器：

app.controller('mainController', ['$scope', '$http', '$q', function($scope, $http, $q) {
  var req1 = $http({method: 'GET', url: 'link to JSON 1', cache: 'true'});
  var req2 = $http({method: 'GET', url: 'link to JSON 2', cache: 'true'});
  $q.all([req1, req2]).then(function(response){
    var res1 = response[0].data;
    var res2 = response[1].data;
    $scope.data1 = res1;       // JSON which I will manipulate
    $scope.data1Ref = res1;   // JSON for reference which I won't manipulate
    $scope.data2 = res2;
    $scope.data2Ref = res2;
    init(); // do the stuff with the data
  });
}]);

但是，在init()完成后，如果我检查$scope.data1并$scope.data1Ref它们都被修改了，那就是它们被绑定在一起。

为什么会发生这种情况，如何确保保留原始下载的 JSON 的存储版本以供参考？

Answer 1

这是因为

在JavaScript中，对象是通过引用传递的。当您将 $scope.data1 和 $scope.data1Ref 设置为等于 res1 时，将它们设置为等于对 res1 的引用。

为了解决这个问题，您可以使用angular.copy制作res对象的深层副本。

$scope.res1Ref = angular.copy(res1);

Answer 2

对对象使用赋值时，只为变量提供对对象的引用，而不是复制对象。在代码中，$scope.data1、$scope.data1Ref 和 res1 都指向完全相同的对象实例。要创建新对象，您需要复制现有对象。

Angular 提供了两个可以复制对象的函数，一个创建浅拷贝，另一个创建深拷贝。浅拷贝复制基元字段，如果对象包含子对象，则原始副本和副本都指向同一个子对象实例。在深层副本中，任何子对象也会创建新副本。

angular.extend可用于创建浅拷贝，而angular.copy则用于深拷贝。

Answer 3

在 AngularJS 中，复杂对象通过引用传递。你可以在这里找到更多信息：angular.copy（） 和赋值 （=） 之间的区别