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

您正在分配data对res对象的属性的引用,而不是分配dataproperty 的值