我有一个角度控制器,它使用 $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
$scope.foo 和 $scope.bar 指向与 res.data 相同的属性。您必须复制对象:
$scope.foo = angular.copy(res.data);
您正在分配对 res 对象的data
属性的引用,而不是分配data
属性的值
这是角度JS双向数据绑定的一个特性。如果您将相同的数据分配给两个不同的目的,最好的方法是获得复制
$scope.foo = res.data;
$scope.bar = angular.copy(res.data);
将对象或数组的值分配给另一个变量时,请使用 angular.copy,并且不应更改该对象值。
如果没有深度复制或使用 angular.copy,更改对象属性的值将更改具有相同引用的所有对象的属性值。
在您的情况下,$scope.foo 和 $scope.bar 具有相同的引用,因此每当您更改 $scope.foo 的属性时,$scope.bar 也会更新。 所以你需要打破引用。
$scope.foo = angular.copy(res.data);