javascript - AngularJS $scope 变量无缘无故改变值?

标签 javascript angularjs angularjs-scope

我有一个 Angular Controller ,它使用 $http.get() 方法获取数据。我将响应数据分配给 $scope.foo 和 $scope.bar。

然后,我使用 ng-model="foo"将 $scope.foo 绑定(bind)到输入字段,然后使用 ng-click="buttonClick()"将 $scope 函数 $scope.buttonClick 绑定(bind)到按钮。

当我更改输入字段的值并选择按钮时,$scope.buttonClick 输出 $scope.foo 和 $scope.bar,并且它们似乎与新输入的值匹配。这很奇怪,因为我只绑定(bind)了 $scope.foo。为什么会发生这种情况以及如何解决它?

Controller :

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 属性的值

关于javascript - AngularJS $scope 变量无缘无故改变值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42847908/

相关文章:

javascript - 类型错误:myParser.MessageParser 不是构造函数

javascript - 单击浏览器操作时切换图标

html - 如何禁用除当前在 angularjs 中选择的所有按钮/图像/div?

angularjs - 有没有办法重置Angular中的$ touched?

javascript - 如何在不同范围内更新模型数组中的项目,并使更改反射(reflect)到各处?

javascript - 为什么更改姓氏时模型中的全名没有更新?

javascript - 如何使 chrome 扩展与页面上的 Angular 对话

javascript - 重新初始化 ckeditor 后保存并恢复光标位置

javascript - 基于数组验证输入

javascript - Handlebars : More than one model inside template