AngularJS $ Scope-Variable ändert den Wert ohne Grund?

Question

Ich habe einen Winkel-Controller, der Daten mit der Methode $ http.get() erhält. Ich weise die Antwortdaten $ scope.foo und $ scope.bar zu.

Ich binde dann $ scope.foo an ein Eingabefeld mit ng-model = "foo" und dann eine $ scope Funktion $ scope.buttonKlicke auf eine Schaltfläche mit ng-click = "buttonClick()".

Wenn ich den Wert des Eingabefeldes ändere und die Schaltfläche wähle, gibt $ scope.buttonClick sowohl $ scope.foo als auch $ scope.bar aus und sie scheinen mit dem neu eingegebenen Wert übereinzustimmen. Das ist seltsam, weil ich $ scope.foo nur gebunden habe. Warum passiert das und wie kann ich das beheben?

Controller:

angular.module('app') 
.controller('controller', ($scope, $http) => { 

    $document.ready(() => { 

     $http.get('/data').then((res) => { 
      $scope.foo = res.data; 
      $scope.bar = res.data; 
     }); 

     $scope.buttonClick =() => console.log($scope.foo, $scope.bar); 
    }); 
}); 

(Verwendet ES6 Syntax) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 1

$ scope.foo und $ scope.bar zeigt auf die gleiche Eigenschaft, die res.data ist. Sie müssen die Objekte kopieren:

$scope.foo = angular.copy(res.data);

Sie einen Verweis auf data Eigenschaft res Zuordnung Objekt anstelle des Werts von data Eigenschaft zuweisen

Answer 2

Dies ist eine Funktion der Winkel JS Zweiweg-Datenbindung. Wenn Sie dieselben Daten in zwei unterschiedlichen Zweck zuzuordnen, ist am besten Weg, eine Kopie

$scope.foo = res.data; 
$scope.bar = angular.copy(res.data); 

Answer 3

Verwenden erhalten angular.copy, wenn der Wert des Objekts oder Array auf eine andere Variable und das Objekt Wert zuweisen sollte nicht geändert werden .

Ohne tiefe Kopie oder mit angular.cop y, den Wert der Objekteigenschaft zu ändern wird den Wert der Eigenschaft aller Objekte ändern, um den gleichen Bezug halten.

In Ihrem Fall $ scope.foo und $ scope.bar mit der gleichen Referenz, also, wenn Sie die Eigenschaft von $ scope.foo ändern, wird auch $ scope.bar aktualisiert. also musst du die Referenz brechen.

$scope.foo = angular.copy(res.data);