将范围分配给变量进行操作时遇到麻烦

时间:2019-06-20 13:57:11

标签: javascript angularjs

尝试将范围对象分配给JavaScript变量,以便在发送到我的API之前进行较小的操作。但是,对JavaScript变量所做的任何更改都会更改范围对象。

var recruitingCallListOutput = $scope.RecrutingCallingList.Recruit;

// manipulation of recruitingCallListOutput

该操作实际上仍然会更新不需要的作用域对象。感觉我对AngularJS的理解不正确。有没有办法获取数据并将其与示波器分离?

2 个答案:

答案 0 :(得分:2)

在您的示例中,creditingCallListOutput是$ scope.RecrutingCallingList.Recruit的 引用 (有关详细信息,请参见https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0。)您将需要创建一个$ scope.RecrutingCallingList.Recruit的副本。

如果Recruit是一个浅对象,则意味着没有嵌套对象(属性值仅是基元),您可以简单地

var recruitingCallListOutput = Object.assign({}, $scope.RecrutingCallingList.Recruit);

如果您将嵌套的对象/数组作为属性值,则需要进行深度复制。自从我进入角度世界以来已经有一段时间了,但是

var recruitingCallListOutput = angular.copy($scope.RecrutingCallingList.Recruit)

您实际上可以在两个示例中使用angular.copy。

答案 1 :(得分:0)

这与AngularJS无关。它是Javascript,并且是预期的行为。

例如,如果您立即打开浏览器控制台(F12->控制台)并运行此命令:

var foo = {x:1};
var copy=foo;
copy.x=2;
console.log(foo.x);

您将看到{x:2}打印出来。

对于Java,C#,Java等对象引用,这与您期望的行为相同。由于您是在创建 reference 而不是副本,因此对引用的任何更改实际上都是更改到原始版本。

解决此问题的最简单方法是将感兴趣的值从所讨论的项目复制到完全独立的对象中,然后修改该 副本。

例如

var recruitingCallListOutput = {
    name: $scope.RecrutingCallingList.Recruit.name,
    age:$scope.RecrutingCallingList.Recruit.age,
    modifiedSomething: $scope.RecrutingCallingList.Recruit.something + 42 //or whatever modifications you need to make
   ...and so on.
};

There are ways to "clone" an object in Javascript,但是除非您的对象确实非常复杂,否则我会小心。考虑一下是否真的需要原始对象的所有属性,也许只需要将其中一些发送到后端即可。