Page 36 - AngularJS权威教程

16 第 5 章 控制器

第5章

控制器

控制器在AngularJS中的作用是增强视图。在Hello World的例子中，我们并没有使用普通的控
制器，而是使用了一个隐式控制器。
AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给
作用域对象设置初始状态，并添加自定义行为。

当我们在页面上创建一个新的控制器时，AngularJS会生成并传递一个新的$scope给这个控
制器。可以在这个控制器里初始化$scope。由于AngularJS会负责处理控制器的实例化过程，我
们只需编写构造函数即可。
下面的例子展示了控制器初始化：
function FirstController($scope) {
$scope.message = "hello";
}

将控制器命名为[Name]Controller而不是[Name]Ctrl是一个最佳实践。

正如我们看到的那样，AngularJS会在创建作用域时调用控制器方法。

细心的读者会发现，我们是在全局作用域中创建的这个函数。这样做并不合适，因为会污染
全局命名空间。更合理的方式是创建一个模块，然后在模块中创建控制器，如下所示：

var app = angular.module('app', []);
app.controller('FirstController', function($scope) {
$scope.message = "hello";
});
只需创建控制器作用域中的函数，就能创建可以在视图中使用的自定义操作。很幸运，
AngularJS允许我们在视图中像调用普通数据一样调用$scope上的函数。
用内置指令ng-click可以将按钮、链接等其他任何DOM元素同点击事件进行绑定。ng-click指
令将浏览器中的mouseup事件，同设置在DOM元素上的事件处理程序绑定在一起（例如，当浏览器
在某个DOM元素上触发了点击事件，函数就会被调用）。和前面的例子类似，绑定看起来是这样的：

<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>