Page 99 - AngularJS权威教程

10.2 指令作用域 79

Inside Div Three: {{ aThirdProperty }} 1
<div ng-controller="SecondController">
Inside Div Four: {{ aThirdProperty }}
</div>
</div> 2
</div>

3

4

5

6

7
图10-1 指令
8
在JavaScript中加入SecondController的定义：

angular.module('myApp', []) 9
.controller('SomeController', function($scope) {
// 可以留空，但需要被定义
})
.controller('SecondController', function($scope) { 10
// 同样可以留空
})
如果要创建一个能够从外部原型继承作用域的指令，将scope属性设置为true： 11

angular.module('myApp', [])
.directive('myDirective', function() { 12
return {
restrict: 'A',
scope: true 13
};
});

下面用指令来改变DOM的作用域： 14
<div ng-app="myApp"
ng-init="someProperty = 'some data'"></div> 15
<div ng-init="siblingProperty='moredata'">
Inside Div Two: {{ aThirdProperty }}
<div ng-init="aThirdProperty = 'data for 3rd property'"
ng-controller="SomeController"> 16
Inside Div Three: {{ aThirdProperty }}
<div ng-controller="SecondController">
Inside Div Four: {{ aThirdProperty }} 17
<br>
Outside myDirective: {{ myProperty }}
<div my-directive ng-init="myProperty = 'wow, this is cool'">
Inside myDirective: {{ myProperty }} 18