angularjs 中的scope继承关系——(2)

转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html

angularjs 中的scope继承关系

ng-include

假设在我们的 controller 中,

$scope.myPrimitive = 50;
$scope.myObject    = {aNumber: 11};

HTML 为:

<script type="text/ng-template" id="/tpl1.html"><input ng-model="myPrimitive">
</script>
<div ng-include src="'/tpl1.html'"></div><script type="text/ng-template" id="/tpl2.html"><input ng-model="myObject.aNumber">
</script>
<div ng-include src="'/tpl2.html'"></div>

每一个 ng-include 会生成一个子 Scope,每个子 Scope 都继承父 Scope。

angularjs-inheritance6

输入(比如”77″)到第一个 input 文本框,则子 Scope 将获得一个新的 myPrimitive 属性,覆盖掉父 Scope 的同名属性。这可能和你预想的不一样。

angularjs-inheritance7

输入(比如”99″)到第二个 input 文本框,并不会在子 Scope 创建新的属性,因为 tpl2.html 将 model 绑定到了一个对象属性(an object property),原型继承在这时发挥了作用,ngModel 寻找对象 myObject 并且在它的父 Scope 中找到了。

angularjs-inheritance8

如果我们不想把 model 从 number 基础类型改为对象,我们可以用 $parent 改写第一个模板:

<input ng-model="$parent.myPrimitive">

输入(比如”22″)到这个文本框也不会创建新属性了。model 被绑定到了父 scope 的属性上(因为 $parent 是子 Scope 指向它的父 Scope 的一个属性)。

angularjs-inheritance9

对于所有的 scope (原型继承的或者非继承的),Angular 总是会通过 Scope 的 $parent, $$childHead 和 $$childTail 属性记录父-子关系(也就是继承关系),图中为简化而未画出这些属性。

在没有表单元素的情况下,另一种方法是在父 Scope 中定义一个函数来修改基本数据类型。因为有原型继承,子 Scope 确保能够调用这个函数。例如,

// 父 Scope 中
$scope.setMyPrimitive = function(value) {$scope.myPrimitive = value;
}

查看 DEMO。参考 StackOverflow。

ng-switch

ng-switch 的原型继承和 ng-include 一样。所以如果你需要对基本类型数据进行双向绑定,使用 $parent,或者将其改为 object 对象并绑定到对象的属性,防止子 Scope 覆盖父 Scope 的属性。

参考 AngularJS, bind scope of a switch-case?

ng-repeat

ng-repeat 有一点不一样。假设在我们的 controller 里:

$scope.myArrayOfPrimitives = [ 11, 22 ];
$scope.myArrayOfObjects    = [{num: 101}, {num: 202}]

还有 HTML:

<ul><li ng-repeat="num in myArrayOfPrimitives"><input ng-model="num"></li>
<ul>
<ul><li ng-repeat="obj in myArrayOfObjects"><input ng-model="obj.num"></li>
<ul>

对于每一个 Item,ng-repeat 创建新的 Scope,每一个 Scope 都继承父 Scope,但同时 item 的值也被赋给了新 Scope 的新属性(新属性的名字为循环的变量名)。Angular ng-repeat 的源码实际上是这样的:

childScope = scope.$new(); // 子 scope 原型继承父 scope ...     
childScope[valueIdent] = value; // 创建新的 childScope 属性

如果 item 是一个基础数据类型(就像 myArrayOfPrimitives),本质上它的值被复制了一份赋给了新的子 scope 属性。改变这个子 scope 属性值(比如用 ng-model,即 num)不会改变父 scope 引用的 array。所以上面第一个 ng-repeat 里每一个子 scope 获得的 num 属性独立于 myArrayOfPrimitives 数组:

angularjs-inheritance10

这样的 ng-repeat 和你预想中的不一样。在 Angular 1.0.2 及更早的版本,向文本框中输入会改变灰色格子的值,它们只在子 Scope 中可见。Angular 1.0.3+ 以后,输入文本不会再有任何作用了。(参考StackOverflow 上的解释)我们希望的是输入能改变 myArrayOfPrimitives 数组,而不是子 Scope 里的属性。为此我们必须将 model 改为一个关于对象的数组(array of objects)。

所以如果 item 是一个对象,则对于原对象的一个引用(而非拷贝)被赋给了新的子 Scope 属性。改变子 Scope 属性的值(使用 ng-model,即 obj.num)也就改变了父 Scope 所引用的对象。所以上面第二个 ng-repeat 可表示为:

angularjs-inheritance11

这才是我们想要的。输入到文本框即会改变灰色格子的值,该值在父 Scope 和子 Scope 均可见。

总结

一共有四种 Scope:

  1. 普通进行原型继承的 Scope —— ng-include, ng-switch, ng-controller, directive with scope: true
  2. 普通原型继承的 Scope 但拷贝赋值 —— ng-repeat。 每个 ng-repeat 的循环都创建新的子 Scope,并且子 Scope 总是获得新的属性。
  3. 独立的 isolate scope —— directive with scope: {...}。它不是原型继承,但 ‘=’, ‘@’ 和 ‘&’ 提供了访问父 Scope 属性的机制。
  4. transcluded scope —— directive with transclude: true。它也遵循原型继承,但它同时是任何 isolate scope 的兄弟。

对于所有的 Scope,Angular 总是会通过 Scope 的 $parent, $$childHead 和 $$childTail 属性记录父-子关系。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397343.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android界面菜单(4)—快捷菜单

2019独角兽企业重金招聘Python工程师标准>>> 快捷菜单 当用户点击界面上某个元素超过2秒后&#xff0c;将启动注册到该界面的快捷菜单。 步骤&#xff1a; 1.代码动态生成菜单 final static int CONTEXT_MENU_1 Menu.FIRST;final static int CONTEXT_MENU_2 Menu…

Echarts地图编写

1.引入echarts库文件 <script charset"utf-8" type"text/javascript" language"javascript" src"echarts-2.2.7/doc/example/www/js/echarts.js"></script> 2.在页面中新建div用于地图展示 <div id"main" st…

威海职业学院计算机专业宿舍,2021年威海职业学院新生宿舍条件和宿舍环境图片...

每年高考结束后&#xff0c;威海职业学院新生被录取同学们陆续都到校报到~而宿舍作为同学们朝夕相处之场所&#xff0c;如果不懂相处之道&#xff0c;难免会摩擦不断&#xff0c;更有甚者堪比宫斗大戏。所以各位大学新生一定要珍惜室友之间的友情&#xff0c;彼此处好关系。本文…

计算机专业录取分数及大学排名,计算机专业录取分数最高的大学有哪些?附排名前50大学名单...

高考结束之后&#xff0c;不少即将迎接高考的家长对于很多专业的录取情况都抱有很大的兴趣&#xff0c;都比较关心自己的理想专业大概能上哪些大学。今天&#xff0c;小编将为大家以山东高考计算机专业各大学录取分数进行排名&#xff0c;供下一届高考生参考。计算机专业作为近…

letsencrypt 自动续期不关闭nginx

为什么80%的码农都做不了架构师&#xff1f;>>> 已失效 corntab -e 5 0 1 * * /opt/letsencrypt/letsencrypt-auto --config /etc/letsencrypt/webroot.ini -d <domain> certonly && sudo service nginx reload/etc/letsencrypt/webroot.ini rsa-key…

loss低但精确度低_低光照图像增强网络-RetinexNet(model.py解析【2】)

论文地址&#xff1a;https://arxiv.org/pdf/1808.04560.pdf代码地址&#xff1a;https://github.com/weichen582/RetinexNet解析目录&#xff1a;https://zhuanlan.zhihu.com/p/88761829整个模型架构被实现为一个类&#xff1a;class lowlight_enhance(object):其构造函数实现…

添加dubbo xsd的支持

使用dubbo时遇到问题&#xff1a; org.xml.sax.SAXParseException: schema_reference.4: Failed to read schema document http://code.alibabatech.com/schema/dubbo/dubbo.xsd, because 1) could not find the document; 2) the document could not be read; 3) the root ele…

byte数组穿换成pcm格式_形象地介绍DSD的编解码原理及和PCM的区别

一直有人不清楚DSD到底是啥原理&#xff0c;和MP3, FLAC, APE, WAV等基于PCM编码技术的音频格式又有啥区别。特意做了两张图说明一下。图一是是由很多黑点构成的蒙娜丽莎头像&#xff0c;点击看大图就知道是没有灰阶只有黑白两色。但是人眼是可以看到有丰富的灰阶的。这和DSD一…

UBUNTU : Destination Host Unreachable

介绍我的系统的搭建的方式: WIN7 64 VMWARE STATION&#xff0c;方式是进行桥接的方式。最近突然出现了问题&#xff0c;Ubuntu ping 外网或者 PING WIN 7 的时候&#xff0c;出现 Destination Host Unreachable 的错误&#xff1b;想着去修改网卡的链接形式&#xff1a; 编辑…

怎么把分开的pdf放在一起_糖和盐混在一起了要怎么分开?| 趣问万物

趣 问 万 物来源&#xff1a;把科学带回家撰文&#xff1a;Mirror如何分离糖和盐&#xff1f;图源&#xff1a;Pixabay小手一抖&#xff0c;不小心把糖(蔗糖)和盐(氯化钠)混在一块儿了该怎么办&#xff1f;趁着光棍节&#xff0c;就让我们吃饱了撑着研究研究把糖和盐拆散的N种方…

《JavaScript DOM编程艺术》笔记

1. 把<script>标签放到HTML文档的最后&#xff0c;<body>标签之前能使浏览器更快地加载页面。 2. nodeType的常见取值 元素节点(1) 属性节点(2) 文本节点(3) 3. <a href"http://www.baidu.com" οnclick"popUp(this.href);return false;"&g…

常熟理工学院计算机考研,2018江苏专转本考生必看-常熟理工学院介绍

原标题&#xff1a;2018江苏专转本考生必看-常熟理工学院介绍这次轮到默默学介绍常熟理工学院啦&#xff01;今年常熟理工学院有个专转本的学生&#xff0c;也是默默学专转本视频课程考上常熟理工的一个学生&#xff0c;叫黄群超&#xff0c;当年专转本计算机也考了八九十分吧&…

.net中调用esb_大型ESB服务总线平台服务运行分析和监控预警实践

今天准备谈下ESB总线平台建设项目中的服务运行统计分析&#xff0c;服务心跳监测&#xff0c;服务监控预警方面的设计和实现。可以看到&#xff0c;在一个ESB服务总线平台上线后&#xff0c;SOA治理管控就变得相当重要&#xff0c;而这些运行监控分析本身也是提升ESB总线平台高…

计算机操作系统实验银行家算法,实验六 银行家算法(下)

实验六 银行家算法(下)一、实验说明实验说明&#xff1a;本次实验主要是对银行家算法进行进一步的实践学习&#xff0c;掌握银行家算法的整体流程&#xff0c;理解程序测试时每一步的当前状态&#xff0c;能对当前的资源分配进行预判断。二、实验要求1、获取源代码2、看懂大致框…

什么原因导致芯片短路_华为为什么突然大量用起了联发科芯片,或是这三个产品策略原因...

经常关注数码圈的都知道&#xff0c;近几年来&#xff0c;随着华为自研能力的提升&#xff0c;华为几乎很少采购第三方芯片&#xff0c;近几年来的绝大多数华为手机&#xff0c;几乎都是用的自研芯片麒麟系列。并没有像其它国产品牌那样用联发科或者高通的芯片。不过今年却大不…

如何运行vue项目(维护他人的项目)

假如你是个小白&#xff0c;在公司接手他人的项目&#xff0c;这个时候&#xff0c;该怎么将这个项目跑通&#xff1f; 前提&#xff1a; 首先&#xff0c;这个教程主要针对vue小白&#xff0c;并且不知道安装node.js环境的。言归正传&#xff0c;下面开始教程&#xff1a;在维…

进程操作

2019独角兽企业重金招聘Python工程师标准>>> 一、创建一个进程 进程是系统中最基本的执行单位。Linux系统允许任何一个用户进程创建一个子进程&#xff0c;创建之后&#xff0c;子进程存在于系统之中并独立于父进程。 关于父进程与子进程这两个概念&#xff0c;除了…

计算机硬件发展的特点有哪些,简述计算机的发展历程及各代计算机的特点。

满意答案Karen0491推荐于 2017.11.25采纳率&#xff1a;40% 等级&#xff1a;6已帮助&#xff1a;608人世界上第一台计算机是1946年问世的&#xff0c;根据计算机的性能和软硬件技术&#xff0c;将计算机发展划分成以下几个阶段&#xff1a;①第一阶段&#xff1a;电子管计算…

电饼锅的样式图片价格_进口珐琅铸铁锅专场,精致小厨娘们来康康!

两个月前&#xff0c;小灰兔我写了《10个高颜值居家好物&#xff0c;让你在朋友圈万众瞩目&#xff01;》一文&#xff0c;曾有小伙伴私信说这张图简直就是梦想中厨房的亚子强烈同意&#xff01;&#xff01;&#xff01;有多少女孩子&#xff0c;看到颜值炒鸡高的锅路都走不动…

在UITouch事件中画圆圈-iOS8 Swift基础教程

这篇教程主要内容展示如何利用Core Graphics Framework画圆圈,当用户点击屏幕时随机生成不同大小的圆,这篇教程在Xcode6和iOS8下编译通过。 打开Xcode,新建项目选择Single View Application,Product Name填写iOS8SwiftDrawingCirclesTutorial,Organization Name和Organization …