Page 98 - AngularJS权威教程

78 第 10 章 指令详解

上面的列子展示的是第一种情况。前两个div是兄弟元素，可以通过get和set访问$rootScope。
第二个div内部的div同样可以通过get和set访问相同的根作用域。
指令嵌套并不一定意味着需要改变它的作用域。默认情况下，子指令会被付予访问父DOM
元素对应的作用域的能力，这样做的原因可以通过介绍指令的scope参数来理解，scope参数默
认是false。

10.2.1 scope参数（布尔型或对象）

scope参数是可选的，可以被设置为true或一个对象。默认值是false。
当scope设置为true时，会从父作用域继承并创建一个新的作用域对象。

如果一个元素上有多个指令使用了隔离作用域，其中只有一个可以生效。只有指令模板中的
根元素可以获得一个新的作用域。因此，对于这些对象来说scope默认被设置为true。
内置指令ng-controller的作用，就是从父级作用域继承并创建一个新的子作用域。它会创
建一个新的从父作用域继承而来的子作用域。

用这些新内容更新一下前面的例子：

<div ng-app="myApp"
ng-init="someProperty = 'some data'">
<div ng-init="siblingProperty='moredata'">
Inside Div Two: {{ aThirdProperty }}
<div ng-init="aThirdProperty = 'data for 3rd property'"
ng-controller="SomeController">
Inside Div Three: {{ aThirdProperty }}
<div ng-init="aFourthProperty">
Inside Div Four: {{ aThirdProperty }}
</div>
</div>
</div>
</div>
如果直接运行这段代码会报错，因为没有在JavaScript中定义所需的控制器，下面就来定义这
个控制器：
angular.module('myApp', [])
.controller('SomeController', function($scope) {
// 可以留空，但需要被定义
})
刷新页面，会发现第二个div中由于{{ aTgirdProperty }}未定义，因此什么都没有输出。
第三个div显示了设置在继承来的作用域中的data for a 3rd property，如图10-1所示。

为了进一步证明作用域的继承机制是向下而非向上进行的，下面再看另外一个例子，展示的
是{{ aThirdProperty }}从父作用域继承而来：

<div ng-app="myApp"
ng-init="someProperty = 'some data'"></div>
<div ng-init="siblingProperty='moredata'">
Inside Div Two: {{ aThirdProperty }}
<div ng-init="aThirdProperty = 'data for 3rd property'"
ng-controller="SomeController">