AngularJS $ scope變量無緣無故地更改值？

Question

我有一個使用$ http.get（）方法獲取數據的角度控制器。 我將響應數據分配給$ scope.foo和$ scope.bar。

然后，我使用ng-model =“ foo”將$ scope.foo綁定到輸入字段，然后使用ng-click =“ buttonClick（）”將$ scope函數$ scope.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/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 1

$ scope.foo和$ scope.bar指向與res.data相同的屬性。 您必須復制對象：

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

您正在分配對res對象的data屬性的引用，而不是分配data屬性的值

Answer 2

這是角度JS雙向數據綁定的功能。 如果將相同的數據分配給兩個不同的用途，最好的方法是獲得一個副本

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

Answer 3

將對象或數組的值分配給另一個變量時，請使用angular.copy ，並且該對象值不應更改。

如果不進行深層復制或使用angular.cop y，則更改對象屬性的值將更改具有相同參考的所有對象的屬性值。

在您的情況下， $ scope.foo和$ scope.bar持有相同的reference ，因此，每當更改$ scope.foo的屬性時，$ scope.bar也會更新。 因此您需要破壞參考。

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