AngularJS $ scope变量值无缘无故变化?

时间:2017-03-17 01:56:54

标签: javascript angularjs angularjs-scope

我有一个角度控制器,可以使用$ http.get()方法获取数据。我将响应数据分配给$ scope.foo和$ scope.bar。

然后我使用ng-model =" foo"将$ scope.foo绑定到输入字段,然后使用ng-click ="将$ scope函数$ scope.buttonClick绑定到一个按钮。 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

3 个答案:

答案 0 :(得分:5)

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

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

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

答案 1 :(得分:1)

这是角度JS双向数据绑定的一个特性。 如果将相同的数据分配到两个不同的目的,最好的方法是得到一个 复制

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

答案 2 :(得分:1)

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

如果没有深层复制使用angular.cop y,更改object属性的值将更改包含相同引用的所有对象的属性值。

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

"errorMessage": "Service Unavailable. Please try again later. (Service:     AmazonECS; Status Code: 500; Error Code: ServerException; Request ID: b02100bb-0ac4-11e7-84df-a552ac171feb)",
"errorType": "com.amazonaws.services.ecs.model.ServerException",