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/en-US/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

这是 Angular JS 双向数据绑定的一个特性。 如果您将相同的数据分配给两个不同的目的，最好的方法是获得一个 复制

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

Answer 3

在将对象或数组的值分配给另一个变量时使用 angular.copy，并且该对象值不应更改。

如果没有深拷贝或使用angular.copy，更改对象属性的值将更改所有持有相同引用的对象的属性值。

在您的情况下，$scope.foo 和 $scope.bar 持有相同的引用，因此每当您更改 $scope.foo 的属性时，$scope.bar 也会更新。所以你需要打破引用。

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