Page 37 - AngularJS权威教程

5.1 控制器嵌套（作用域包含作用域） 17
第 5 章 控制器

按钮和链接都被绑定在了内部$scope的一个操作上，当点击任何一个元素时AngularJS都会 1
调用相应的方法。注意，当设置调用哪个函数时，会同时用括号传递一个参数（add(1)）。
下面给FirstController添加一个操作： 2

app.controller('FirstController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; }; 3
$scope.subtract = function(amount) { $scope.counter -= amount; };
});
4
用这种设置方式我们可以在视图中调用add()或subtract()方法，这两个方法可以定义在
FirstController的作用域中，或其父级的$scope中。
5
控制器可以将与一个独立视图相关的业务逻辑封装在一个独立的容器中。尽可能地精简控制
器是很好的做法。作为AngularJS开发者，使用依赖注入来访问服务可以实现这个目的。
6
AngularJS同其他JavaScript框架最主要的一个区别就是，控制器并不适合用来执行DOM操
作、格式化或数据操作，以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的
桥梁。 7
AngularJS允许在$scope上设置包括对象在内的任何类型的数据，并且在视图中还可以展示
对象的属性。 8

例如，我们在MyController上创建一个person对象，这个对象只有name这一个属性：
9
app.controller('MyController', function($scope) {
$scope.person = {
name: 'Ari Lerner' 10
};
});
在拥有ng-controller='MyController'这个属性的元素内部的任何子元素中，都可以访问 11
person对象，因为它是定义在$scope上的。

例如，可以方便地在视图中引用person或person.name，效果如图5-1所示。 12
<div ng-app="myApp">
<div ng-controller="MyController">
<h1>{{ person }}</h1> 13
and their name:
<h2>{{ person.name }}</h2>
</div> 14
</div>

15

16

17

18
图5-1 控制器对象