转: 深入理解 AngularJS 的 Scope

 

查看 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 数组:

这样的 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 可表示为:

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

参考 Difficulty with ng-model, ng-repeat, and inputs 以及 ng-repeat and databinding

ng-controller

使用 ng-controller 进行嵌套,结果和 ng-include 和 ng-switch 一样是正常的原型继承。所以做法也一样不再赘述。然而“两个 controller 使用 $scope 继承来共享信息被认为是不好的做法”(来自 这里),应该使用 service 在 controller 间共享数据。

如果你确实要通过继承来共享数据,那么也没什么特殊要做的,子 Scope 可以直接访问所有父 Scope 的属性。参考 Controller load order differs when loading or navigating

directives

这个要分情况来讨论。

  1. 默认 scope: false – directive 不会创建新的 Scope,所以没有原型继承。这看上去很简单,但也很危险,因为你会以为 directive 在 Scope 中创建了一个新的属性,而实际上它只是用到了一个已存在的属性。这对编写可复用的模块和组件来说并不好。
  2. scope: true – 这时 directive 会创建一个新的子 scope 并继承父 scope。如果在同一个 DOM 节点上有多个 directive 都要创建新 scope,则只有一个新 Scope 会创建。因为有正常的原型继承,所以和 ng-include, ng-switch 一样要注意基础类型数据的双向绑定,子 Scope 属性会覆盖父 Scope 同名属性。
  3. scope: { ... } – 这时 directive 创建一个独立的 scope,没有原型继承。这在编写可复用的模块和组件时是比较好的选择,因为 directive 不会不小心读写父 scope。然而,有时候这类 directives 又经常需要访问父 scope 的属性。对象散列(object hash)被用来建立这个独立 Scope 与父 Scope 间的双向绑定(使用 ‘=’)或单向绑定(使用 ‘@’)。还有一个 ‘&’ 用来绑定父 Scope 的表达式。这些统统从父 Scope 派生创建出本地的 Scope 属性。注意,HTML 属性被用来建立绑定,你无法在对象散列中引用父 Scope 的属性名,你必须使用一个 HTML 属性。例如,<div my-directive> 和 scope: { localProp: ‘@parentProp‘ } 是无法绑定父属性 parentProp 到独立 scope的,你必须这样指定: <div my-directive the-Parent-Prop=parentProp> 以及scope: { localProp: ‘@theParentProp‘ }。独立的 scope 中 __proto__ 引用了一个 Scope 对象(下图中的桔黄色 Object),独立 scope 的 $parent 指向父 scope,所以尽管它是独立的而且没有从父 Scope 原型继承,它仍然是一个子 scope。

    下面的图中,我们有 <my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2"> 和 scope: { interpolatedProp: ‘@interpolated‘, twowayBindingProp: ‘=twowayBinding‘ }
    同时,假设 directive 在它的 link 函数里做了 scope.someIsolateProp = "I‘m isolated"

    注意:在 link 函数中使用 attrs.$observe(‘attr_name‘, function(value) { ... } 来获取独立 Scope 用 ‘@’ 符号替换的属性值。例如,在 link 函数中有 attrs.$observe(‘interpolated‘, function(value) { ... } 值将被设为 11. (scope.interpolatedProp 在 link 函数中是 undefined,相反scope.twowayBindingProp 在 link 函数中定义了,因为用了 ‘=’ 符号)
    更多参考 http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/

  4. transclude: true – 这时 directive 创建了一个新的 “transcluded” 子 scope,同时继承父 scope。所以如果模板片段中的内容(例如那些将要替代 ng-transclude 的内容)要求对父 Scope 的基本类型数据进行双向绑定,使用 $parent,或者将 model 一个对象的属性,防止子 Scope 属性覆盖父 Scope 属性。

    transcluded 和独立 scope (如果有)是兄弟关系,每个 Scope 的 $parent 指向同一个父 Scope。当模板中的 scope 和独立 Scope 同时存在,独立 Scope 属性 $$nextSibling 将会指向模板中的 Scope。
    更多关于 transcluded scope 的信息,参考 AngularJS two way binding not working in directive with transcluded scope

    在下图中,假设 directive 和上个图一样,只是多了 transclude: true


    查看 在线 DEMO,例子里有一个 showScope() 函数可以用来检查独立 Scope 和它关联的 transcluded 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 属性记录父-子关系。

时间: 2024-10-11 14:52:20

转: 深入理解 AngularJS 的 Scope的相关文章

深入理解 AngularJS 的 Scope

JavaScript 的原型继承就是奇葩. 之前在 V2EX 上看到讨论说,不会 OOP 的 JavaScript 的程序员就是野生程序员.看来我是属于野生的. 一.遇到的问题 问题发生在使用 AngularJS 嵌套 Controller 的时候.因为每个 Controller 都有它对应的 Scope(相当于作用域.控制范围),所以 Controller 的嵌套,也就意味着 Scope 的嵌套.这个时候如果两个 Scope 内都有同名的 Model 会发生什么呢?从子 Scope 怎样更新父

深入理解 AngularJS 的 Scope(转)

一.遇到的问题 问题发生在使用 AngularJS 嵌套 Controller 的时候.因为每个 Controller 都有它对应的 Scope(相当于作用域.控制范围),所以 Controller 的嵌套,也就意味着 Scope 的嵌套.这个时候如果两个 Scope 内都有同名的 Model 会发生什么呢?从子 Scope 怎样更新父 Scope 里的 Model 呢? 这个问题很典型,比方说当前页面是一个产品列表,那么就需要定义一个 ProductListController functio

转: 理解AngularJS中的依赖注入

理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Provider服务($provide) $provide服务负责告诉Angular如何创造一个新的可注入的东西:即服务(service).服务会被叫做provider的东西来定 义,你可以使用$provide来创建一个provider.你需要使用$provide中的provider方法来定义一个provi

理解AngularJS ngRoute

一般来说,我们认为AngularJS是一套前端的MVC框架.那么,为了实现视图的中转,肯定会涉及到路由的概念.这里我们就来说说有关AngularJS的路由--ngRoute. 序 个人了解到AngularJS,是由于在寻找可以动态利用Ajax从服务器端取得部分页面这一功能而找到EmberJS,而后又根据EmberJS找到的AngularJS.而在AngularJS中,实现这一功能的,就是ngRoute. 所以,个人与AngularJS的结缘,是由于ngRoute一点也不为过. 理解 Angula

[转]AngularJS: 使用Scope时的6个陷阱

在使用AngularJS中的scope时,会有6个主要陷阱.如果你理解AngularJS背后的概念的话,这6个点其实非常的简单.但是在具体讲述这6个陷阱之前我们先要讲两个其它的概念. 概念1: 双向数据绑定 双向数据绑定是AngularJS中非常重要的一个部分.一般的绑定对于我们来说已经非常熟悉了.即使你没有听说过双向数据绑定,你一定使用过它. 普通的绑定一般是用来数据数据的,它实际上是模板引擎的一个基本概念: Hello {{username}} 如果将变量username设置为John Do

一步步构建自己的AngularJS(2)——scope之$watch及$digest

在上一节项目初始化中,我们最终得到了一个可以运行的基础代码库,它的基本结构如下: 其中node_modules文件夹存放项目中的第三方依赖模块,src存放我们的项目代码源文件,test存放测试用例文件,.jshintrc是jshint插件的配置文件,karma.conf.js是karma的配置文件,package.json是npm的配置文件,结构其实很简单.从本节开始,会在这个代码库的基础上进行我们自己Angular的实现. 首先,在写代码之前,在命令行中输入npm test命令,让我们的测试用

从浏览器的console获取angularjs的scope

http://ionicframework.com/blog/angularjs-console/ 1: Access Scopes We can access any scope (even isolated ones!) on the page with a simple JS one-liner: > angular.element(targetNode).scope() -> ChildScope {$id: "005", this: ChildScope, $$l

深入浅出理解AngularJS模块

AngularJS 模块 1.添加控制器 你可以使用 ng-controller 指令来添加应用的控制器: <div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br>姓: <input type="text" ng-model="la

[AngularJS] 理解AngularJS Directive中的Scope

默认情况下, AngluarJS不会为在一个Controller下的Directive创建一个单独的作用域(Scope). 这个Directive中的所有关于$scope的变量都是在它的Controller中定义, 并且会被其他的在同一Controller中的Directive所共享, 例如以下代码: <script> (function(angular) { angular.module('zzIsolateScopeTest', []) .directive("directive