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,一经查实,立即删除!

相关文章

C# DatatTable某一列是否有重复判断

public bool HasRepeatData(DataTable dt,string[] colName) { bool flagfalse; DataView myDataView new DataView(dt); if (myDataView.ToTable(true, colName).Rows.Count < dt.Rows.Count) { flag true; } return flag; }转载于:https://www.cnblogs.com/clj0102/p/93…

cordova 项目添加splash启动界面

需求&#xff1a;cordova项目启动添加启动界面&#xff0c;并在设备初始化完成后自动隐藏splash1.新建项目cordova create Mypro com.test.pro proName2.添加平台cd Mypro&#xff08;进入目录&#xff09;cordova platform add androidcordova platform add iOS3.添加splash插…

辽宁大学计算机专业接收调剂,目前有计算机专业调剂通知的学校,不断更新—3月26日更新,新增辽宁大学等...

本帖最后由 yunnyforo 于 2012-3-26 21:16 编辑注&#xff1a;我对研究所关注度不高&#xff0c;关于研究所的调剂通知可能不及时&#xff0c;见谅。大家可以关注中国教育在线考研调剂信息站&#xff1a;http://kaoyan.eol.cn/html/ky/tiaoji/index.shtml&#xff0c;个人感觉这…

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…

迷宫游戏 堆栈实现

#include<iostream> #include<string> #include<stack> using namespace std; #define n 8stack <int *> s;int * createMaze(){//初始化迷宫int i,j;int * a;anew int[n*n];for(i0;i<n;i){for(j0;j<n;j){*(an*ij)-1;//不设置为0的原因是超过矩阵…

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

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

PostgreSQL 函数调试、诊断、优化 auto_explain

PostgreSQL 函数调试 & auto_explain 作者 digoal 日期 2016-11-21 标签 PostgreSQL , pldebugger , 函数调试 , auto_explain 背景 PostgreSQL的服务端编程能力比较强&#xff0c;不仅支持像java, R, python这种流行的编程语言&#xff0c;另外还内置了一个与Oracle plsql…

判断请求来自手机还是PC

由于小程序和PC端用的是同一个后台 所以就需要判断请求是从哪里发过来的 在这里是利用Request Body 里面的user-agent 来判断 /** * 根据当前请求的特征&#xff0c;判断该请求是否来自手机终端&#xff0c;主要检测特殊的头信息&#xff0c;以及user-Agent这个header * * pa…

小旭的互联网营销之微信营销

11月1日&#xff0c;一篇题为《什么样的女黑客竟遭马云强东在双11联手封杀?》的文章&#xff0c;借助双11火热的关注效应&#xff0c;在短短两天时间内刷爆朋友圈。 该文章的女主角不仅外表靓丽&#xff0c;黑客技术更是惊艳&#xff1a;“作为美籍华人的Joanna在2015黑帽子会…

计算机专业录取分数及大学排名,计算机专业录取分数最高的大学有哪些?附排名前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):其构造函数实现…

计算机应用发表论文,计算机应用论文发表.docx

计算机应用论文发表1在工程项目管理中应用计算机技术存在的问题计算机软件是计算机运行的重要保障&#xff0c;一个好的计算机软件直接决定计算机技术在工程项目管理的高效应用。但由于市场上计算机软件种类繁多&#xff0c;质量好坏不一&#xff0c;质量好的价格高&#xff0c…

添加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一…

最大熵对应的概率分布

最大熵对应的概率分布 最大熵定理 设 \(X \sim p(x)\) 是一个连续型随机变量&#xff0c;其微分熵定义为\[ h(X) - \int p(x)\log p(x) dx \]其中&#xff0c;\(\log\) 一般取自然对数 \(\ln\), 单位为 奈特&#xff08;nats&#xff09;。 考虑如下优化问题&#xff1a;\[ \b…

UBUNTU : Destination Host Unreachable

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

焦作师范高等专科学校对口计算机分数线,焦作师范高等专科学校录取分数线2018...

焦作师范高等专科学校录取分数线20182018年 电子信息工程技术 理科 332 3602018年 物联网应用技术 文科 391 4082018年 物联网应用技术 理科 328 3692018年 学前教育 文科 388 4022018年 学前教育 理科 324 3512018年 移动应用开发 文科 02018年 移动应用开发 理科 305 3322018…

在Spring boot 配置过滤器(filter)

在spring boot 配置servlet filter 逻辑上与配置spring 是一样的。 不过相比spring 更加简化配置的难度。 这里只需要两步1 创建一个自定义顾虑器并继承spring filter 例如OncePerRequestFilterpublic class AuthenticationFilter extends OncePerRequestFilter{private final …