AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法。但有一个例外:在directive中使用scope: { ... }
,这种方式创建的作用域是一个独立的"Isolate"作用域,它也有父作用域,但父作用域不在其原型链上,不会对父作用域进行原型继承。这种方式定义作用域通常用于构造可复用的directive组件。
作用域的原型继承是非常简单普遍的,甚至你不必关心它的运作。直到你在子作用域中向父作用域的原始类型属性使用双向数据绑定2-way data binding,比如Form表单的ng-model
为父作用域中的属性,且为原始类型,输入数据后,它不会如你期望的那样运行——AngularJS不会把输入数据写到你期望的父作用域属性中去,而是直接在子作用域创建同名属性并写入数据。这个行为符合JavaScript原型继承机制的行为。AngularJS新手通常没有认识到ng-repeat
、 ng-switch
、ng-view
和ng-include
都会创建子作用域, 所以经常出问题。 (见 示例)
避免这个问题的最佳实践是在ng-model
中总使用.
,参见文章 always have a '.' in your ng-models。
比如:
<input type="text" ng-model="someObj.prop1">
优于:
<input type="text" ng-model="prop1">
如果你一定要直接使用原始类型,要注意两点:
- 在子作用域中使用
$parent.parentScopeProperty
,这样可以直接修改父作用域的属性。 - 在父作用域中定义函数,子作用域通过原型继承调用函数把值传递给父作用域(这种方式极少使用)。
正文:
JavaScript 原型继承机制
你必须完全理解JavaScript的原型继承机制,尤其是当你有后端开发背景和类继承经验的时候。所以我们先来回顾一下原型继承:
假设父作用域parentScope
拥有以下属性和方法:aString
、aNumber
、anArray
、anObject
、aFunction
。子作用域childScope
如果从父作用域parentScope
进行原型继承,我们将看到:
(注:为节约空间,anArray使用了蓝色方块图)
如果我们在子作用域中访问一个父作用域中定义的属性,JavaScript首先在子作用域中寻找该属性,没找到再从原型链上的父作用域中寻找,如果还没找到会再往上一级原型链的父作用域寻找。在AngularJS中,作用域原型链的顶端是$rootScope
,JavaScript寻找到$rootScope
为止。所以,以下表达式均为true
:
childScope.aString === 'parent string'
childScope.anArray[1] === 20
childScope.anObject.property1 === 'parent prop1'
childScope.aFunction() === 'parent output'
如果我们进行如下操作:
childScope.aString = 'child string'
因为我们赋值目标是子作用域的属性,原型链将不会被查询,一个新的与父作用域中属性同名的属性aString
将被添加到当前的子作用域childScope
中。
如果我们进行如下操作:
childScope.anArray[1] = '22'
childScope.anObject.property1 = 'child prop1'
因为我们的赋值目标是子作用域属性anArray
和anObject
的子属性,也就是说JavaScript必须先要先寻找anArray
和anObject
这两个对象——它们必须为对象,否则不能写入属性,而这两个对象不在当前子作用域,原型链将被查询,在父作用域中找到这两个对象, 然后对这两个对象的属性[1]
和property1
进行赋值操作。子作用域中不会不会创建两个新的同名属性!(注意JavaScript中数组和函数均是对象——引用类型)
如果我们进行如下操作:
childScope.anArray = [100, 555]
childScope.anObject = { name: 'Mark', country: 'USA' }
同样因为我们赋值目标是子作用域的属性,原型链将不会被查询,,JavaScript会直接在子作用域创建两个同名属性,其值分别为数组和对象。
要点:
- 如果我们读取
childScope.propertyX
,并且childScope
存在propertyX
,原型链不会被查询; - 如果我们写入
childScope.propertyX
, 原型链也不会被查询; - 如果我们写入
childScope.propertyX.subPropertyY
, 并且childScope
不存在propertyX
,原型链将被查询——查找propertyX
。
最后一点:
delete childScope.anArray
childScope.anArray[1] === 22 // true
如果我们先删除了子作用域childScope的属性,然后再读取该属性,因为找不到该属性,原型链将被查询。
AngularJS 作用域Scope的继承
提示:
- 以下方式会创建新的子作用域,并且进行原型继承:
ng-repeat
、ng-include
、ng-switch
、ng-view
、ng-controller
, 用scope: true
和transclude: true
创建directive。 - 以下方式会创建新的独立作用域,不会进行原型继承:用
scope: { ... }
创建directive。这样创建的作用域被称为"Isolate"作用域。
注意:默认情况下创建directive使用了scope: false
,不会创建子作用域。
进行原型继承即意味着父作用域在子作用域的原型链上,这是JavaScript的特性。AngularJS的作用域还存在如下内部定义的关系:
- scope.$parent指向scope的父作用域;
- scope.$$childHead指向scope的第一个子作用域;
- scope.$$childTail指向scope的最后一个子作用域;
- scope.$$nextSibling指向scope的下一个相邻作用域;
- scope.$$prevSibling指向scope的上一个相邻作用域;
这些关系用于AngularJS内部历遍,如$broadcast和$emit事件广播,$digest处理等。
ng-include
In controller:
$scope.myPrimitive = 50;
$scope.myObject = {aNumber: 11};
In 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
指令都创建一个子作用域, 并且会从父作用域进行原型继承。
在第一个input框输入"77"将会导致子作用域中新建一个同名属性,其值为77,这不是你想要的结果。
在第二个input框输入"99"会直接修改父作用域的myObject
对象,这就是JavaScript原型继承机制的作用。
(注:上图存在错误,红色99因为是50,11应该是99)
如果我们不想把model由原始类型改成引用类型——对象,我们也可以使用$parent直接操作父作用域:
<input ng-model="$parent.myPrimitive">
输入"22"我们得到了想要的结果。
另一种方法就是使用函数,在父作用域定义函数,子作用域通过原型继承可运行该函数:
// in the parent scope
$scope.setMyPrimitive = function(value) {
$scope.myPrimitive = value;
}
请参考:
sample fiddle that uses this "parent function" approach. (This was part of aStack Overflow post.)
http://*.com/a/13782671/215945
https://github.com/angular/angular.js/issues/1267.
ng-switch
ng-switch
与ng-include
一样。
参考: AngularJS, bind scope of a switch-case?
ng-view
ng-view
与ng-include
一样。
ng-repeat
Ng-repeat
也创建子作用域,但有些不同。
In controller:
$scope.myArrayOfPrimitives = [ 11, 22 ];
$scope.myArrayOfObjects = [{num: 101}, {num: 202}]
In 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>
ng-repeat
对每一个迭代项Item都会创建子作用域, 子作用域也从父作用域进行原型继承。 但它还是会在子作用域中新建同名属性,把Item赋值给对应的子作用域的同名属性。 下面是AngularJS中ng-repeat
的部分源代码:
childScope = scope.$new(); // child scope prototypically inherits from parent scope ...
childScope[valueIdent] = value; // creates a new childScope property
如果Item是原始类型(如myArrayOfPrimitives的11、22), 那么子作用域中有一个新属性(如num
),它是Item的副本(11、22). 修改子作用域num
的值将不会改变父作用域myArrayOfPrimitives,所以在上一个ng-repeat
,每一个子作用域都有一个num
属性,该属性与myArrayOfPrimitives无关联:
显然这不会是你想要的结果。我们需要的是在子作用域中修改了值后反映到myArrayOfPrimitives数组。我们需要使用引用类型的Item,如上面第二个ng-repeat
所示。
myArrayOfObjects的每一项Item都是一个对象——引用类型,ng-repeat
对每一个Item创建子作用域,并在子作用域新建obj
属性,obj
属性就是该Item的一个引用,而不是副本。
我们修改子作用域的obj.num就是修改了myArrayOfObjects。这才是我们想要的结果。
参考:
Difficulty with ng-model, ng-repeat, and inputs
ng-controller
使用ng-controller
与ng-include
一样也是创建子作用域,会从父级controller创建的作用域进行原型继承。但是,利用原型继承来使父子controller共享数据是一个糟糕的办法。 "it is considered bad form for two controllers to share information via $scope inheritance",controllers之间应该使用 service进行数据共享。
(如果一定要利用原型继承来进行父子controllers之间数据共享,也可以直接使用。 请参考: Controller load order differs when loading or navigating)
directives
- 默认 (
scope: false
) - directive使用原有作用域,所以也不存在原型继承,这种方式很简单,但也很容易出问题——除非该directive与html不存在数据绑定,否则一般情况建议使用第2条方式。 -
scope: true
- directive创建一个子作用域, 并且会从父作用域进行原型继承。 如果同一个DOM element存在多个directives要求创建子作用域,那么只有一个子作用域被创建,directives共用该子作用域。 -
scope: { ... }
- directive创建一个独立的“Isolate”作用域,没有原型继承。这是创建可复用directive组件的最佳选择。因为它不会直接访问/修改父作用域的属性,不会产生意外的副作用。这种directive与父作用域进行数据通信有如下四种方式(更详细的内容请参考Developer Guide):- = or =attr “Isolate”作用域的属性与父作用域的属性进行双向绑定,任何一方的修改均影响到对方,这是最常用的方式;
- @ or @attr “Isolate”作用域的属性与父作用域的属性进行单向绑定,即“Isolate”作用域只能读取父作用域的值,并且该值永远的String类型;
- & or &attr “Isolate”作用域把父作用域的属性包装成一个函数,从而以函数的方式读写父作用域的属性,包装方法是$parse,详情请见API-$parse;
“Isolate”作用域的
__proto__
是一个标准Scope object (the picture below needs to be updated to show an orange 'Scope' object instead of an 'Object'). “Isolate”作用域的$parent同样指向父作用域。它虽然没有原型继承,但它仍然是一个子作用域。如下directive:
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope:
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
link函数中:
scope.someIsolateProp = "I'm isolated"
请注意,我们在link函数中使用
attrs.$observe('interpolated', function(value) { ... }
来监测@
属性的变化。更多请参考: http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/
-
transclude: true
- directive新建一个“transcluded”子作用域,并且会从父作用域进行原型继承。需要注意的是,“transcluded”作用域与“Isolate”作用域是相邻的关系(如果“Isolate”作用域存在的话) -- 他们的$parent属性指向同一个父作用域。“Isolate”作用域的$$nextSibling指向“transcluded”作用域。更多请参考: AngularJS two way binding not working in directive with transcluded scope
demo: fiddle
总结
AngularJS存在四种作用域:
- 普通的带原型继承的作用域 --
ng-include
,ng-switch
,ng-controller
, directive withscope: true
; - 普通的带原型继承的,并且有赋值行为的作用域 --
ng-repeat
,ng-repeat为每一个迭代项创建一个普通的有原型继承的子作用域,但同时在子作用域中创建新属性存储迭代项; - “Isolate”作用域 -- directive with
scope: {...}
, 该作用域没有原型继承,但可以通过'=', '@', 和 '&'与父作用域通信。 - “transcluded”作用域 -- directive with
transclude: true
,它也是普通的带原型继承的作用域,但它与“Isolate”作用域是相邻的好基友。
Diagrams were generated with GraphViz "*.dot" files, which are on github. Tim Caswell's "Learning JavaScript with Object Graphs" was the inspiration for using GraphViz for the diagrams.
The above was originally posted on *.
理解AngularJS的作用域Scope的更多相关文章
-
理解angularJS中作用域$scope
angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...
-
理解angularjs的作用域
<!doctype html> <html ng-app="myApp"> <head> <script src="http:/ ...
-
转深入理解 AngularJS 的 Scope作用域
文章转载英文:what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs 中文:http://www. ...
-
深入理解AngularJs-scope(一)
进入正文前的说明:本文中的示例代码并非AngularJs源码,而是来自书籍<<Build Your Own AngularJs>>, 这本书的作者仅依赖jquery和lodas ...
-
深入理解AngularJs-scope(二)
深入理解AngularJs-scope(一)中,我们对AngularJs的脏检测及其触发.异步任务队列进行了学习.紧接上一篇文章 深入理解AngularJs-scope(一),我们来看看scope对以 ...
-
angularJS(二):作用域$scope、控制器、过滤器
app.controller创建控制器 一.作用域 Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. ...
-
AngularJs 隔离作用域
初学NG,有诸多的不解,今天看了一篇文章,原文地址:https://segmentfault.com/a/1190000002773689#articleHeader0 ,本文运行的代码也出处此. 里 ...
-
AngularJS-01.AngularJS,Module,Controller,scope
1.AngularJS 一个构建动态Web应用程序的结构化框架. 基于JavaScript的MVC框架.( MVC ---- Model(模型).View(视图).Controller(控制器) ) ...
-
理解AngularJS生命周期:利用ng-repeat动态解析自定义directive
ng-repeat是AngularJS中一个非常重要和有意思的directive,常见的用法之一是将某种自定义directive和ng-repeat一起使用,循环地来渲染开发者所需要的组件.比如现在有 ...
随机推荐
-
img标签 加载FTP的图片 C#
好吧,我是菜鸟,这是我今天遇到的问题,什么也不会,得高人指点 1.使用FtpWebRequest下载图片,以流存贮 2.在ashx文件里面直接已流方式(HttpContext.Current.Resp ...
-
UNDO
UNDO及事物 undo表空间是Oracle独有,在oracle开启一个事物之后,oracle对数据进行修改,同时,会把修改前的数据保存到UNDO表空间的UNDO段里.undo表空间中会自动分配und ...
-
raspberryPi 拍照
调用python的库,学习raspberryPi的摄像头操作方法. 参考链接: https://www.raspberrypi.org/learning/getting-started-with-pi ...
-
PAT 10-0 说反话
我写了两种实现方法,其中第二种是参考Yomman园友的(http://www.cnblogs.com/yomman/p/4271949.html).我的方法(方法一)是用一个数组存放输入的字符串,另一 ...
-
MFC消息响应机制 q
MFC消息响应机制分析 1 引言微软公司提供的MFC基本类库(Microsoft Foundation Classes),是进行可视化编程时使用最为流行的一个类 库.MFC封装了大部分Windows ...
-
Yeoman安装
Yeoman帮助我们创建项目,提供更好的工具来使我们的项目更多样化. Yeoman提供generator系统,一个generator是一个插件,在我们在一个完整的项目上使用‘yo’命令时,会运行该ge ...
-
WebService - [Debug] undefined element declaration &#39;s:schema&#39;
错误: [ERROR] undefined element declaration 's:schema' line 44 of http://www.webxml.com.cn/WebServices ...
-
[CI]jenkins安装&;插件管理&;java-helloworld之旅
持续集成概述 没有持续集成时的情况 持续集成最佳实战 维护一个单一的代码库 使构建自动化 执行测试是构建的一部分 集成日志及历史记录 使用统一的依赖包管理库 每天至少集成一次 jenkins实现持续集 ...
-
使用System.Net.Mail中的SMTP发送邮件(带附件)
System.Net.Mail 使用简单邮件传输协议SMTP异步发送邮件 想要实现SMTP发送邮件,你需要了解这些类 SmtpClient :使用配置文件设置来初始化 SmtpClient类的新实例. ...
-
一、InnoDB引擎
一.InnoDB的历史 MYSQL的5.1版本的时候还是使用旧的innoDB,当时orale公司推出的新的innoDB引擎, 但是需要以插件的形式编译,叫innoDB plugin : 知道MYSQL ...