利用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 相关文章推荐
js修改input的type属性问题探讨
Oct 12 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 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
页面乱码问题的根源及其分析
2013/08/09 PHP
php中的登陆login实例代码
2016/06/20 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
Python正则简单实例分析
2017/03/21 Python
python numpy格式化打印的实例
2018/05/14 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
实例详解Python模块decimal
2019/06/26 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
物业管理个人自我评价
2013/11/08 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
美术教师岗位职责
2014/03/18 职场文书
新课培训心得体会
2014/09/03 职场文书
职代会闭幕词
2015/01/28 职场文书
毕业典礼邀请函
2015/01/31 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python