(网页)Angular.js 中 copy 赋值与 = 赋值 区别

时间:2022-09-15 09:57:42

转自st.gg

Angular.js 中 copy 赋值与 = 赋值 区别

  为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.user 改变?angular.copy 和 = 号赋值有什么区别呢?新手还没有搞懂,请教各位了。

<!DOCTYPE html>
<html>
<script src= "http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body> <div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user }}</p>
<p>master = {{master}}</p>
</div> <script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName:"John", lastName:"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
// 为什么用 $scope.user = $scope.master; master跟着user改变
};
$scope.reset();
});
</script> </body>
</html>

你可以这么来理解:

  1. 内存里有一段地址储存了 { firstName: "John", lastName: "Doe" } 这个数据,并且最开始用 $scope.master指向了它

  2. 当你 $scope.user = $scope.master 的时候,事实上是让二者同时指向了该数据,因此一个变了另外一个也会跟着变

  3. 当你 $scope.user = angular.copy($scope.master) 的时候,先做了一份该数据的拷贝(也就是内存中多了另外一份数据,值是一样的,但地址肯定不同),然后让 $scope.user 指向了这份拷贝,所以二者指向了不同的内存地址,当然不会相互影响了。

记住,这并非 Angular 的特殊情况,而是编程语言的通用基础。

其实就是一个是拷贝数据,一个是拷贝引用。无论何种编程语言都会有这个问题,所以就会有深拷贝这种概念。

因为项目着急,要用angular.js,修改老是修改出错,都快疯掉了,修改方法还没写,只是动了动数据,数据的属性全变了。唉。加油吧。

(网页)Angular.js 中 copy 赋值与 = 赋值 区别的更多相关文章

  1. 【转】千万不要在JS中使用连等赋值操作

    原文链接 千万不要在JS中使用连等赋值操作   目录 前言 赋值顺序? 连续赋值能拆开写么? 后记 前言 文章标题这句话原本是在国外某JavaScript规范里看到的,当时并没有引起足够的重视,直到最 ...

  2. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  3. angular&period;js 中同步视图和模型数据双向绑定&comma;&dollar;watch &dollar;digest &dollar;apply 机制

    Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...

  4. angular&period;js 中的作用域 数据模型 控制器

    1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...

  5. Angular&period;js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

  6. 在Angular&period;js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  7. Angular JS 中的服务注册方法

    在Angular JS中创建服务的几种方法 factory() service() constant() value() provider() factory(name,fn(){}) 该服务为单例的 ...

  8. JS 中的require 和 import 区别整理

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

  9. 浅谈JS中的&excl;&equals;、&equals;&equals; 、&excl;&equals;&equals;、&equals;&equals;&equals;的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C&num;中Cookie,Session,Application的用法与区别? c&num;反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

随机推荐

  1. iOS-H5学习篇-01

    什么是HTML? HTML 是用来描述网页的一种语言. 0.HTML 指的是超文本标记语言 1.HTML 不是一种编程语言,而是一种标记语言 2.标记语言是一套标记标签 3.HTML 使用标记标签来描 ...

  2. TWaver家族新成员 — Legolas工业自动化设计平台

    对于TWaver可视化家族的成员,大家比较熟悉的是我们的网络拓扑图组件和MONO Design三维建模工具.作为开发工具,这两款产品面向广大的程序猿同志,在界面可视化上为大家省时省力.但是,当项目交付 ...

  3. OpenVirteX 安装

    参考 sdnlab 带你走进OpenVirteX之环境搭建 ubuntu14.04安装OpenVirteX 官网链接 系统要求: Recommended Cores GB java heap size ...

  4. &ast;像word一样编辑复杂的文本:SpannableString 样式详介

    简介: 使用android.text.Spanned; android.text.SpannableString; android.text.SpannableStringBuilder; 和 and ...

  5. HBase Java API使用(一)

    前言 1. 创建表:(由master完成) 首先需要获取master地址(master启动时会将地址告诉zookeeper)因而客户端首先会访问zookeeper获取master的地址 client和 ...

  6. iis本地无法通过ip地址访问网站

    防火墙等通通检查过没有发现问题,最后发现是我安装了一款adsafe的广告过滤软件捣的鬼,此软件设置界面没有这样的设置条款,估计是默认的配置,退出后,就ok了.

  7. C&num;学习笔记-组合模式

    什么是组合模式? 组合模式(Composite):将对象组合成树形结构以表示“部分-整体”的层次结构. 组合模式使得用户对单个对象和组合对象的使用具有一致性. 何时使用组合模式? 当需求中是体现部分与 ...

  8. github中删除项目

  9. SQLite3创建数据库的方法

    上次刚接触SqlLite,不知道怎么创建数据库,现在做下总结: 界面和MYSQL一样,都是CMD界面,但不是在SQLite.exe中创建数据库: 首先还是说一下cmd下sqlite的使用网上已经很多了 ...

  10. Codeforces Round &num;419 D&period; Karen and Test

    Karen has just arrived at school, and she has a math test today! The test is about basic addition an ...