利用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 相关文章推荐
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
canvas时钟效果
Feb 16 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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-redis中文文档介绍
2013/02/07 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
javascript 框架小结 个人工作经验
2009/06/13 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
基于iScroll实现内容滚动效果
2018/03/21 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Python pip替换为阿里源的方法步骤
2019/07/02 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
python实现自动清理重复文件
2020/08/24 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
什么是servlet链?
2014/07/13 面试题
《走一步再走一步》教学反思
2014/02/15 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
申报材料格式
2014/12/30 职场文书
公司2015年终工作总结
2015/05/26 职场文书
建国大业观后感800字
2015/06/01 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
Python面向对象之成员相关知识总结
2021/06/24 Python