2017-03-17 145 views
0

我有使用$ http.get()方法得到的數據的角度控制器。我將響應數據分配給$ scope.foo和$ scope.bar。

然後,我使用ng-model =「foo」將$ scope.foo綁定到輸入字段,然後使用ng-click =「buttonClick()」將一個$ scope函數綁定到一個按鈕。

當我改變輸入字段的值,然後選擇按鈕,$ 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

+0

可能的重複[爲什麼以及何時使用angular.copy? (深層副本)(http://stackoverflow.com/questions/33043850/why-and-when-to-use-angular-copy-deep-copy) – georgeawg

回答

5

$ scope.foo和$ scope.bar指向是res.data相同的屬性。您必須複製的對象:

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

您分配一個參考資源的data財產對象,而不是分配data財產

+0

運行完美。謝謝。 – Max

1

的值。這是角JS雙向數據綁定的功能。 如果您分配相同的數據到兩個不同的目的,最好的辦法就是獲得一份

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

使用分配對象或數組的另一個變量,而該對象的值的值時angular.copy不應改變。

沒有深層副本使用angular.cop Y,改變對象屬性的值將改變保持相同的附圖中的所有對象的屬性值。

在你的情況下$ scope.foo和$ scope.bar持有相同的引用,所以每當你改變$ scope.foo的屬性時,$ scope.bar也會被更新。所以你需要打破參考。

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