[译]AngularJS1.3.0 开发者指南(四) -- 控制器

理解Controllers

在AngularJS中,Controller是一个Javascript构造函数,常常被用来扩展 Angular Scope 对象.

控制器通过 ng-controller 指令依附在DOM元素上,Angular通过指定的控制器构造函数,实例化一个新的Controller对象. 这时,一个被声明为$scope的新的子作用域被注入到控制器的构造函数中.

使用Controllers我们将可以:

• 设置$scope对象的初始化状态
• 给$scope对象添加行为

不要使用Controllers进行以下操作:

• 操作dom --- Controllers应该只包含业务逻辑. 把表现逻辑放到Controllers中会影响它的可测试性. Angular使用数据绑定机制来处理大多数实例,并且通过指令机制封装DOM操作.
• 格式化输入 --- 应该使用 angular form controls 来代替这个操作.
• 过滤输出 --- 应该使用 angular filters代替.
• 通过控制器公用代码或共享状态 --- 应该使用 anguler services 来实现.
• 管理其他组件的生命周期(例如,创建service实例)

设置$scope对象的初始状态

通常,在你创建一个应用时,你需要为Angular的$scope对象设置初始状态. 通过在$scope对象上附加属性的方式完成设置初始状态的操作. 这些属性包括了 视图模型(即要在视图中展示的模型). 在注册控制器的DOM中,所有的$scope属性对于模板都是可用的.

下面的示例中,创建了一个名为 GreetingController 控制器,在这个控制器中,将一个字符串属性'Hola!'添加在$scope对象上:

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

在应用中,创建了一个Angular Module (模块),myApp. 然后,我们使用.controller()方法给模板添加一个控制器的构造函数. 这使得控制器的构造函数不会污染全局作用域.

对Angular提供的$scope服务,我们可以用内联式注解指定控制器所需要的依赖,详情见Dependency Injection.

我们可以使用ng-controller指令将控制器添加到DOM元素上. greeting属性现在可以通过数据绑定机制被绑定到模板上:

<div ng-controller="GreetingController">
{{ greeting }}
</div>

为作用域对象添加行为

为了在视图中响应事件或者执行计算,我们必须在作用域提供相应的行为. 我们可以通过为$scope对象赋加方法的方式,在作用域中添加行为. 这些方法可以在模板或视图中被调用到.

在下面的示例中,通过控制器在作用域中添加了一个方法,这个方法实现的数值翻倍:

var myApp = angular.module('myApp',[]);

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

一旦为DOM元素指定了某个控制器,在模板中就可以通过Angular表达式调用double方法:

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

正如本指南的概念部分所讨论的,分配到作用域上的任何对象(或原语)都作为模型的属性. 分配到作用域上的方法对于模板和视图来说都是可用的,都可以通过Angular表达式和ng事件处理指令(例如: ng-click)来调用.

正确地使用控制器

通常,控制器不应该做太多事情,它应该只包括展示单个视图所需要的业务逻辑.

使得控制器简单的最觉的方式是封闭功能,即把哪些不属于控制器的功能封闭到服务中,然后在控制器中通过依赖注入的方式使用这些服务. 这一点将在本指南的依赖注入服务部分讨论.

将控制器和Angular作用对象联系起来

可以隐匿的通过ng-controller指令和$route服务将控制器和作用对象关联.

简单控制器示例

为了进一步说明控制器在Angular中是怎样工作的,我们用下列组件创建一个小app:

• 包含两个按钮和一个简单展示信息的模板
• 包含一个字符串的模型,此字符串命名为spice
• 包含两个函数的控制器,这两个函数可以对spice进行赋值

这个展示信息与spice模型绑定,而这个模型默认值为"very". 根据点击的按钮,spice模板被设值为chili或者jalapeño,展示信息通过数据绑定机制自动更新为新的值.

<div ng-controller="SpicyController">
 <button ng-click="chiliSpicy()">Chili</button>
 <button ng-click="jalapenoSpicy()">Jalapeño</button>
 <p>The food is {{spice}} spicy!</p>
</div>

var myApp = angular.module('spicyApp1', []);

myApp.controller('SpicyController', function($scope) {
    $scope.spice = 'very';

    $scope.chiliSpicy = function() {
        $scope.spice = 'chili';
    };

    $scope.jalapenoSpicy = function() {
        $scope.spice = 'jalapeño';
    };
}]);

以上示例的注意事项:

• ng-controller用于为我们的模板(隐匿的)创建一个作用域,而此作用在控制器SpicyController得以加强(管理).
• SpicyController只是一个普通的JavaScript函数. 作为(可选的)命名惯例,命名要以大写字母开关,并以"Controller"结尾.
• 给$scope对象添加属性即创建或更新了模型.
• 控制器中的方法可以通过直接给作用域赋值的形式创建出来(见chiliSpicy方法).
• 在模板中可以使用控制器中的方法和属性(例如<div>元素和它的子元素).

带参示例

控制器方法也可以传参数,下面的示例对前一示例加以改动以展示效果:

<div ng-controller="SpicyController">
    <input ng-model="customSpice">
    <button ng-click="spicy('chili')">Chili</button>
    <button ng-click="spicy(customSpice)">Custom spice</button>
    <p>The food is {{spice}} spicy!</p>
</div>

var myApp = angular.module('spicyApp2', function($scope) {
    $scope.customSpice = "wasabi";
    $scope.spice = 'very';

    $scope.spicy = function(spice) {
        $scope.spice = spice;
    };
}]);

注意SpicyController控制器中只定义了一个spicy方法,这个方法声名了spice参数. 然后模板引入这个控制器方法,并在第一个按钮事件中传入字符串常量chili,在第二个按钮事件中传入模型属性customSpice(与输入框绑定).

作用域继承示例

通过会将控制器添加到不同的DOM层次结构中. 由于ng-controller指令会创建一个新的子作用域,所以我们将得到一个存在继承关系的作用域树. 每一个控制器都会接收$scope对象,这个$scope对象可以访问更高一级控制器中定义的属性和方法. 关于作用域继承机制更多信息见Understanding Scopes(理解作用域)

<div class="spicy">
    <div ng-controller="MainController">
        <p>Good {{timeOfDay}},{{name}}!</p>
    
        <div ng-controller="ChildController">
            <p>Good {{timeOfDay}},{{name}}!</p>
    
            <div ng-controller="GrandChildController">
                <p>Good {{timeOfDay}},{{name}}!</p>
            </div>
        </div>
    </div>
</div>

var myApp = angular.module('scopeInheritance', []);
myApp.controller('MainController', function($scope) {
    $scope.timeOfDay = 'morning';
    $scope.name = 'Nikki';
}]);
myApp.controller('ChildController', function($scope) {
    $scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController', function($scope) {
    $scope.timeOfDay = 'evening';
    $scope.name = 'Gingerbread Baby';
}]);

div.spicy div {
    padding: 10px;  
    border: solid 2px blue;
}

注意我们是怎样在模板中构建了三层ng-controller指令,这实际上是为我们的视图创建了四层作用域:

• root scope,根作用域
• MainController作用域,包含timeOfDay和name属性
• ChildController作用域,继承了timeOfDay属性,重写(隐藏)了父作用域中的name属性
• GrandChildController作用域,重写(隐藏)了定义在MainController控制器中的timeOfDay属性以及定义在ChildController控制器中的name属性

对于方法,继承机制同样有效. 因此在上面示例中,所有的属性可以被返回值为字符串的方法所代替.