利用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代码编写的14条技巧
Jan 09 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
十大使用PHP框架的理由
2015/09/26 PHP
PHP序列化操作方法分析
2016/09/28 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
市场营销毕业生自荐信
2013/11/23 职场文书
烹调加工管理制度
2014/02/04 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
活动总结新闻稿
2014/08/30 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
vue实现滑动解锁功能
2022/03/03 Vue.js
nginx.conf配置文件结构小结
2022/04/08 Servers