![](/img/trans.png)
[英]Variable value not updating in view when changing it in $scope using Ionic and AngularJS
[英]AngularJS $scope variable changing value for no reason?
我有一个使用$ 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/zh-CN/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.cop y,则更改对象属性的值将更改具有相同参考的所有对象的属性值。
在您的情况下, $ scope.foo和$ scope.bar持有相同的reference ,因此,每当更改$ scope.foo的属性时,$ scope.bar也会更新。 因此您需要破坏参考。
$scope.foo = angular.copy(res.data);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.