利用angular.copy取消变量的双向绑定与解析  更新时间:2016年11月25日 11:46:49   投稿:daisy   众所周知AngularJS的双向绑定在表单应用中强大又方便,但是偶尔会遇到需要解除对象变量的双向绑定。Angular提供的angular.copy的方法可以实现解除双向绑定。所以这篇文章就来给大家详细的介绍下angular.copy,有需要的朋友们可以参考借鉴,下面来一起看看吧。 首先我们来看看示例代码 data: user.data: {{user.data}} user1.data: {{user1.data}} change copy copyData: {{copyUser.data}} 从上面的演示可以看到,当点击copy按钮时,copyData的值就变成了”this is old data”,成功将user的值复制到copyUser. 当点击change按钮后,user1和user的值都变成了’is changed’,而copyUser的值却没有发生改变。这时候在input输入框改变值,user和user1的值都会跟着改变,说明了这二者实际上是同一个变量引用。而copyUser没有发生变化。 angular.copy 能取消双向绑定的原理 这跟JavaScript中对象是引用类型有关。 JavaScript中的值类型 在JavaScript中,值分为原始值和引用值两种类型。      原始值:存储在栈(Stack)中的简单数据字段,也就是说,它们的值是直接存储在变量访问的位置;      引用值:存储在堆(heap)中,也就是说,存储在变量处的值是一个指针,指向存储对象的内存处。 如下图所示: 在JavaScript中的对象便是引用值,也就是说对象是通过引用传递值的。 所以在上述的代码中: 对象$scope.user和$scope.user1的值都是指向了同一个引用。对于Angular来说,监听变量变化是在监听其对象所引用的地址,所以当对象的引用值发生了变化,所有指向它的对象都会跟着发生变化。 所以在Angular中,直接通过对象的赋值是无法解除双向绑定的。所以要想解除双向绑定的办法就是新创建个对象,然后将原有的对象的值赋值给新对象。这不就是JavaScript中的深拷贝嘛。 对的,angular.copy就是Angular提供的 deep copy 的方法。所以通过angular.copy复制出来的对象,既能和原有的对象值保持一致,又不与旧对象指向同一个引用,从而实现了解除对象变量的双向绑定。 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Angular.js能有所帮助,如果有疑问大家可以留言交流。 您可能感兴趣的文章: 理解Angular数据双向绑定 浅谈angular.js中实现双向绑定的方法$watch $digest $apply 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框 深入学习AngularJS中数据的双向绑定机制 实例剖析AngularJS框架中数据的双向绑定运用 Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定) AngularJS入门教程之双向绑定详解 深入理解Angularjs向指令传递数据双向绑定机制 div实现自适应高度的textarea实现angular双向绑定 angular+bootstrap的双向数据绑定实例 angular.copy angular.js 双向绑定 相关文章 对angularJs中$sce服务安全显示html文本的实例 今天小编就为大家分享一篇对angularJs中$sce服务安全显示html文本的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 AngularJS实现的select二级联动下拉菜单功能示例 这篇文章主要介绍了AngularJS实现的select二级联动下拉菜单功能,结合完整实例形式分析了AngularJS实现二级联动菜单的具体操作步骤与相关实现技巧,需要的朋友可以参考下 2017-10-10 Angular.js中ng-if、ng-show和ng-hide的区别介绍 angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。那么这篇文章就给大家主要介绍了Angular.js中ng-if、ng-show和ng-hide的区别,需要的朋友可以参考借鉴,下面来一起看看吧。 2017-01-01 AngularJs Using $location详解及示例代码 本文主要介绍AngularJs Using $location的知识资料,这里整理了相关的资料,及简单示例代码,有兴趣的小伙伴可以参考下 2016-09-09 Angular 中使用 FineReport不显示报表直接打印预览 这篇文章主要介绍了Angular 中使用 FineReport不显示报表直接打印预览,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-08-08 对angular 监控数据模型变化的事件方法$watch详解 今天小编就为大家分享一篇对angular 监控数据模型变化的事件方法$watch详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 angularjs 缓存的使用详解 这篇文章主要介绍了angularjs 缓存的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-03-03 AngularJS上传文件的示例代码 上传文件在很多时候都能用到,这篇文章主要介绍了AngularJS上传文件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-11-11 AngularJS入门教程二:在路由中传递参数的方法分析 这篇文章主要介绍了AngularJS在路由中传递参数的方法,结合实例形式分析了AngularJS实现路由中传递参数的相关技巧,并总结了相关操作步骤与注意事项,需要的朋友可以参考下 2017-05-05 初学者AngularJS的环境搭建过程 这篇文章主要介绍了初学者AngularJS的环境搭建过程,在文章给大家提到了Angular-cli的特性,大家一起看看吧 2017-10-10 最新评论

首先我们来看看示例代码

<body ng-app="app">
 <div ng-controller="CopyController">
 <div>
 data: <input ng-model="user.data" /><br>
 user.data: {{user.data}} <br>
 user1.data: {{user1.data}} <br>
 <button ng-click="changeData1()">change</button> <br>
 <button ng-click="copy()">copy</button> <br>
 copyData: {{copyUser.data}}
 </div>
 </div>
 <script src="node_modules/angular/angular.min.js"></script>
</body>
<script>
 angular.module('app', [])
 .controller('CopyController', function ($scope) {
 // body...
 $scope.changeData1 = function () {
  // body...
  scope.user1=scope.user1=
scope.user;
  $scope.user1.data = 'is changed';
 }
 $scope.copy = function () {
  // body...
  scope.copyUser=angular.copy(scope.copyUser=angular.copy(
scope.user);
 }
 });
</script>

从上面的演示可以看到,当点击copy按钮时,copyData的值就变成了”this is old data”,成功将user的值复制到copyUser.

当点击change按钮后,user1和user的值都变成了’is changed’,而copyUser的值却没有发生改变。这时候在input输入框改变值,user和user1的值都会跟着改变,说明了这二者实际上是同一个变量引用。而copyUser没有发生变化。

angular.copy 能取消双向绑定的原理

这跟JavaScript中对象是引用类型有关。

JavaScript中的值类型

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

     原始值:存储在栈(Stack)中的简单数据字段,也就是说,它们的值是直接存储在变量访问的位置;

     引用值:存储在堆(heap)中,也就是说,存储在变量处的值是一个指针,指向存储对象的内存处。

如下图所示:

在JavaScript中的对象便是引用值,也就是说对象是通过引用传递值的。

所以在上述的代码中:

对象$scope.user$scope.user1的值都是指向了同一个引用。对于Angular来说,监听变量变化是在监听其对象所引用的地址,所以当对象的引用值发生了变化,所有指向它的对象都会跟着发生变化。

所以在Angular中,直接通过对象的赋值是无法解除双向绑定的。所以要想解除双向绑定的办法就是新创建个对象,然后将原有的对象的值赋值给新对象。这不就是JavaScript中的深拷贝嘛。

对的,angular.copy就是Angular提供的 deep copy 的方法。所以通过angular.copy复制出来的对象,既能和原有的对象值保持一致,又不与旧对象指向同一个引用,从而实现了解除对象变量的双向绑定。

总结

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

您可能感兴趣的文章:

  • 理解Angular数据双向绑定
  • 浅谈angular.js中实现双向绑定的方法$watch $digest $apply
  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
  • 深入学习AngularJS中数据的双向绑定机制
  • 实例剖析AngularJS框架中数据的双向绑定运用
  • Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
  • AngularJS入门教程之双向绑定详解
  • 深入理解Angularjs向指令传递数据双向绑定机制
  • div实现自适应高度的textarea实现angular双向绑定
  • angular+bootstrap的双向数据绑定实例
张贴在3