使用angular.copy取消变量的双向绑定和解析

首先，让我们看看示例代码

body ng-app=' app ' div ng-controller=' copy controller ' div data : input ng-model=' user . data '/br user . data : { { user . data } } br user 1 . data : { { user 1 . data } } br button ng-click=' changedata 1()' change/button br button ng-click=' copy()' copy/button br copy data3360 { { copy user . data } }/div/div script src=' httpcontroller('CopyController '，函数($scope) { //body.$ scope . changedata 1=function(){//body.scope . user 1=scope . user 1=scope . user；$scope.user1.data='已更改；} $scope.copy=function () { //body.scope . copy user=angular . copy(scope . copy user=angular . copy(scope . user)；} });/脚本

从上面的演示可以看出，当点击复制按钮时，copyData的值变为“这是旧数据”，用户的值成功复制到copyUser。

单击“更改”按钮时，user1和user的值变为“已更改”，但copyUser的值不变。此时，如果改变输入输入框中的值，user和user1的值也会相应改变，这表明它们实际上是同一个变量引用。而copyUser没有变化。

角度复制可以取消双向绑定的原理

这与JavaScript中对象的引用类型有关。

JavaScript中的值类型

在JavaScript中，值分为两种类型：原始值和引用值。

原值：栈中存储的简单数据字段，即它们的值直接存储在变量访问的位置；

引用值：存储在堆中，即变量中存储的值是指向存储对象的内存的指针。

如下图所示：

JavaScript中的对象是引用值，这意味着对象通过引用传递值。

所以在上面的代码中，

对象$scope.user和$scope.user1的值都指向同一个引用。对于Angular来说，监控变量的变化就是监控其对象所引用的地址，所以当对象的引用值发生变化时，所有指向它的对象都会随之变化。

因此，在Angular中，不可能通过给对象赋值来直接解除双向绑定。因此，释放双向绑定的方法是创建一个新对象，然后将原始对象的值分配给新对象。这是JavaScript中的深度复制。

是的，Angular.copy是Angular提供的深度复制方法。因此angular.copy复制的对象与原对象值一致，不指向与旧对象相同的引用，从而实现了对象变量的双向绑定。

摘要

以上就是本文的全部内容。希望这篇文章的内容对大家学习或者使用Angular.js有帮助，有问题可以留言交流。