利用angular.copy取消变量的双向绑定与解析


Posted in Javascript onNovember 25, 2016

首先我们来看看示例代码

<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>

利用angular.copy取消变量的双向绑定与解析

从上面的演示可以看到,当点击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)中,也就是说,存储在变量处的值是一个指针,指向存储对象的内存处。

如下图所示:

利用angular.copy取消变量的双向绑定与解析

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

所以在上述的代码中:

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

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

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

总结

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

Javascript 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 #Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 #Javascript
使用JS读取XML文件的方法
Nov 25 #Javascript
JS比较两个数值的大小实例
Nov 25 #Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 #Javascript
js移动焦点到最后位置的简单方法
Nov 25 #Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 #Javascript
You might like
php目录管理函数小结
2008/09/10 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
python中import与from方法总结(推荐)
2019/03/21 Python
python logging添加filter教程
2019/12/24 Python
Python sys模块常用方法解析
2020/02/20 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
2014年上半年工作自我评价
2014/01/18 职场文书
网络编辑职责
2014/03/01 职场文书
面试必备的求职信
2014/05/25 职场文书
经营理念标语
2014/06/21 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
个人作风建设心得体会
2014/10/22 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript