Javascript AngularJS$范围变量无故更改值？

我有一个角度控制器，它使用$http.get（）方法获取数据。我将响应数据分配给$scope.foo和$scope.bar

然后，我使用ng model=“foo”将$scope.foo绑定到输入字段，然后使用ng click=“buttonClick（）”将$scope函数$scope.button单击到按钮

当我更改输入字段的值并选择按钮时，$scope.button单击输出$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语法）

---

$scope.foo和$scope.bar指向与res.data相同的属性。必须复制对象：

$scope.foo=angular.copy（res.data）

您正在为res对象的
数据
属性指定一个引用，而不是指定
数据
属性的值
这是双向数据绑定的一个功能。
若将相同的数据分配到两个不同的目的中，最好的方法是获得一个
抄袭

将对象或数组的值指定给另一个变量时，请使用角度。复制，并且不应更改该对象的值

如果不使用深度复制或使用angular.copy，更改对象属性的值将更改持有相同引用的所有对象的属性值

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

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

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

工作完美。谢谢你。可能有两份