利用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 函数声明与函数表达式的区别介绍
Oct 05 Javascript
jquery分页对象使用示例
Apr 01 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php遍历CSV类实例
2015/04/14 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
Python交换变量
2008/09/06 Python
在Python下尝试多线程编程
2015/04/28 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
python实现K最近邻算法
2018/01/29 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Django 路由层URLconf的实现
2019/12/30 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
企业申诉管理制度
2014/01/30 职场文书
户外拓展活动方案
2014/02/11 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
客户答谢会致辞
2015/01/20 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python