Page 81 - AngularJS权威教程

9.2 在指令中使用子作用域 61

{{ someModel.someProperty }} 1
<button ng-click="someAction()">Communicate</button>
</div>

angular.module('myApp', []) 2
.controller('SomeController', function($scope) {
//创建模型
$scope.someModel = { 3
// 添加属性
someProperty: 'hello computer'
}
// 设置$scope自身的操作 4
$scope.someAction = function() {
$scope.someModel.someProperty = 'hello human';
}; 5
});
在线示例：http://jsbin.com/OYikipe/1/edit。
6
注意，这个例子和之前相比有两处不同：首先，我们使用了$rootScope的子作用域，它提
供了一个干净的对象供我们操作。使用子作用域意味着其上的数据模型和操作在应用的其他地方
7
是无法访问的，只能被这个作用域内的指令及其子作用域访问。其次，显式声明了数据模型，我
们说过，这非常重要。为了展示这为什么重要，看一下这个例子的变体。这个例子中，在已有的
控制器中嵌套了第二个控制器，并且没有设置模型对象的属性： 8
<div ng-controller="SomeController">
{{ someBareValue }} 9
<button ng-click="someAction()">Communicate to child</button>
<div ng-controller="ChildController">
{{ someBareValue }}
<button ng-click="childAction()">Communicate to parent</button> 10
</div>
</div>
11
angular.module('myApp', [])
.controller('SomeController', function($scope) {
// 反模式，裸值
$scope.someBareValue = 'hello computer'; 12
// 设置 $scope 本身的操作，这样没问题
$scope.someAction = function() {
// 在SomeController和ChildController中设置{{ someBareValue }} 13
$scope.someBareValue = 'hello human, from parent';
};
})
.controller('ChildController', function($scope) { 14
$scope.childAction = function() {
// 在ChildController中设置{{ someBareValue }}
$scope.someBareValue = 'hello human, from child'; 15
};
});
在线示例：http://jsbin.com/UbIRIHa/1/。 16

由于原型继承的关系，修改父级对象中的someBareValue会同时修改子对象中的值，但反之
则不行。 17
可以看下这个例子的实际效果，首先点击child button，然后点击parent button。这个例子充分
说明了子控制器是复制而非引用someBareValue。 18