AngularJS - это переменные перекрестные связи?

Question

Я начинаю свое Угловое контроллер при загрузке данных в формате JSON с помощью Promises и хранить его в переменных:

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.

Чтобы обойти это, вы можете сделать глубокую копию своих объектов res с помощью angular.copy.

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

Answer 2

Когда вы используете назначение объектов, вы предоставляете переменную только ссылку на объект, а не копирование объекта. В вашем коде $scope.data1, $scope.data1Ref и res1 все указывают на точный экземпляр объекта. Чтобы создать новый объект, вам необходимо скопировать существующий объект.

Угловой обеспечивает две функции, которые могут копировать объект, один создает мелкую копию, а другую - глубокую копию. Неглубокая копия копирует примитивные поля, и если объект содержит дочерние объекты, оригинал и копия указывают на один и тот же экземпляр дочернего объекта. В глубокой копии любые дочерние объекты также создают новые копии.

angular.extend может использоваться для создания мелкой копии, а angular.copy выполняет глубокую копию.

Answer 3

В AngularJS, сложные объекты передаются по ссылке. Вы можете найти более подробную информацию здесь: Difference between angular.copy() and assignment (=)