AngularJS $スコープ変数が何の理由もなく値を変更していますか？

Question

私は、$ http.get（）メソッドを使ってデータを取得する角度コントローラーを持っています。私は応答データを$ scope.fooと$ scope.barに割り当てます。

次に、ng-model = "foo"を使用して$ scope.fooを入力フィールドにバインドし、$ scope関数$ scope.buttonをng-click = "buttonClick（）"を使用してボタンにクリックします。

入力フィールドの値を変更してボタンを選択すると、$ scope.buttonClickは$ scope.fooと$ scope.barの両方を出力し、新しく入力された値と一致するように見えます。私は$ scope.fooだけをバインドしているので、これは奇妙です。なぜこれが起こっているのですか？どのように修正できますか？

コントローラ：

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

（ES6構文を使用）

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 1

$のscope.fooと$ scope.barはres.dataで同じ性質を指しています。あなたは、オブジェクトをコピーする必要があります：あなたは解像度のdataプロパティへの参照をオブジェクトに割り当てる代わりに、これは、結合角度JS双方向データの特徴であるdataプロパティ

Answer 2

の値を代入している

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

。あなたは二つの異なる目的に同じデータを割り当てた場合 、最善の方法は、

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

Answer 3

使用 コピーを取得angular.copy別の変数へのオブジェクトや配列の値と、そのオブジェクトの値を割り当てる変更すべきではありませんされて。オブジェクトのプロパティの値は、同一の参照を保持しているすべてのオブジェクトのプロパティ値を変更します変更 Yをangular.cop使用ディープコピー又はなし

、。

$ scope.fooと$ scope.barが同じ参照を保持しているので、$ scope.fooのプロパティを変更するたびに$ scope.barも更新されます。だからあなたは参照を破る必要があります。

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