AngularJs 功能（四）--控制器

控制器

控制器Controller是Angular应用三大组成部分之一。

说一说我对angular控制器的理解：
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

要明确创建一个$scope 对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性：

<div ng-controller="MyController"> {{ person.name }} </div>

ng-controller指令给所在的DOM元素创建了一个新的$scope 对象，并将这个$scope 对象包含进外层DOM元素的$scope 对象里。在上面的例子里，这个外层DOM元素的$scope 对象，就是$rootScope 对象。

scope对象初始化
通常情况下，你创建一个angular应用时，你需要先设置scope的初始状态。你需要为scope设置一些属性，包含在view中预先声明的model，所有$scope的属性在controller注册的DOM里都是可用的。

给scope对象增加一些行为
为了响应一些事件或者在view中进行一些计算，我们必须为$scope增加一些行为。我们通过为$scope对象增加方法的方式为他增加行为，这些方法可以被template/view调用。

下面的示例演示如何为controller增加方法

angular.module('myApp'[]).controller('DoubleController',['$scope',function($scope) {
  $scope.double = function(value) { return value * 2; };
}]);

controller一旦被添加到DOM中，该方法就可以在template中被调用

<div ng-controller="DoubleController">
  Two times <input ng-model="num"> equals {{ double(num) }}
</div>

要注意以下几点：

ng-controller directive 隐式地为template创建了一个scope，这个scope又被SpicyController controller管理。
仅仅是一个简单的javascript函数。命名规范是大写字母开头，以Controller结束。
为scope分配一个属性去创建和更新model
controller的方法可以通过直接赋值的方式创建
controller的方法或者属性在template中是可用的

所有scope都遵循原型继承（prototypal inheritance），这意味着它们都能访问父scope们。对任何属性和方法，如果AngularJS在当前scope上找不到，就会到父 scope上去找，如果在父scope上也没找到，就会继续向上回溯，一直到$rootScope 上。

唯一的例外：有些指令属性可以选择性地创建一个独立的scope，让这个scope不继承它的父scope们，这个会在指令详解中说明。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!