javascript - Angularjs $scope、数据绑定(bind)和变量更改。

Question

所以我正在 Angular JS v1.4.0 中开发一个应用程序，但我遇到了范围界定问题。有一个部分有一个需要提交的表单，但在发送之前需要修改数据。我目前正在尝试在调用服务器之前在 JavaScript 中执行此操作。

我有 $scope.msgEditor，它是表单所需的一堆不同值的对象，以及消息变量本身。重要的部分看起来像这样:

msgEditor [
    msg: {
        groups: {
            selected: {
                0: '1',
                1: '2',
            }
        }
    }
]

我试图获取这个 $scope 变量，将其分配给局部变量，然后开始解析数据，如下所示:

$scope.formOnSubmit = function () {
    formattedMessage = formatDataForSave($scope.msgEditor.msg);
};

function formatDataForSave(message) {
    message.groups = message.groups.selected.join(', ');

    return message;
}

我想要发生的是 $scope.msgEditor.msg 根本不改变，并且 formattedMessage 从第二个函数返回，因此可以将其放入 $http 调用中。但是，连接会更改消息、formattedMessage 和 $scope.msgEditor.msg

我做了更多测试，看看发生了什么:

$scope.formOnSubmit = function () {
    $scope.test = $scope.msgEditor.msg;
    var formattedMessage = $scope.test;
    formattedMessage = formatDataForSave(formattedMessage);
};

发现对 formattedMessage 所做的更改会更改 $scope.test，这会更改 $scope.msgEdtior.msg。

任何关于为什么会发生这种情况或如何防止这种情况的指示都会令人惊奇。

Answer 1

我相信您对将参数传递到 javascript 中的函数感到困惑:在 javascript 中，所有参数都是通过引用传递的，因此结果就是您所经历的。看看angular.copy函数。

https://code.angularjs.org/1.3.17/docs/api/ng/function/angular.copy

我无法测试这个，但你可以尝试:

$scope.formOnSubmit = function () {
    var msgCopy = angular.copy($scope.msgEditor.msg);
    formattedMessage = formatDataForSave(msgCopy);
};

function formatDataForSave(message) {
    message.groups = message.groups.selected.join(', ');

    return message;
}