[译]AngularJS1.3.0 开发者指南(四) -- 控制器
理解Controllers在AngularJS中,Controller是一个Javascript构造函数,常常被用来扩展 Angular Scope 对象. 控制器通过 ng-controller 指令依附在DOM元素上,Angular通过指定的控制器构造函数,实例化一个新的Controller对象. 这时,一个被声明为 使用Controllers我们将可以:
不要使用Controllers进行以下操作:
设置$scope对象的初始状态通常,在你创建一个应用时,你需要为Angular的 下面的示例中,创建了一个名为 GreetingController 控制器,在这个控制器中,将一个字符串属性'Hola!'添加在 var myApp = angular.module('myApp',[]); myApp.controller('GreetingController', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]); 在应用中,创建了一个Angular Module (模块), 对Angular提供的 我们可以使用 <div ng-controller="GreetingController"> {{ greeting }} </div> 为作用域对象添加行为为了在视图中响应事件或者执行计算,我们必须在作用域提供相应的行为. 我们可以通过为 在下面的示例中,通过控制器在作用域中添加了一个方法,这个方法实现的数值翻倍: var myApp = angular.module('myApp',[]); myApp.controller('DoubleController', function($scope) { $scope.double = function(value) { return value * 2; }; }]); 一旦为DOM元素指定了某个控制器,在模板中就可以通过Angular表达式调用 <div ng-controller="DoubleController"> Two times <input ng-model="num"> equals {{ double(num) }} </div> 正如本指南的概念部分所讨论的,分配到作用域上的任何对象(或原语)都作为模型的属性. 分配到作用域上的方法对于模板和视图来说都是可用的,都可以通过Angular表达式和 正确地使用控制器通常,控制器不应该做太多事情,它应该只包括展示单个视图所需要的业务逻辑. 使得控制器简单的最觉的方式是封闭功能,即把哪些不属于控制器的功能封闭到服务中,然后在控制器中通过依赖注入的方式使用这些服务. 这一点将在本指南的依赖注入服务部分讨论. 将控制器和Angular作用对象联系起来可以隐匿的通过 简单控制器示例为了进一步说明控制器在Angular中是怎样工作的,我们用下列组件创建一个小app:
这个展示信息与 <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'; }; }]); 以上示例的注意事项:
带参示例控制器方法也可以传参数,下面的示例对前一示例加以改动以展示效果: <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; }; }]); 注意 作用域继承示例通过会将控制器添加到不同的DOM层次结构中. 由于 <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; } 注意我们是怎样在模板中构建了三层
对于方法,继承机制同样有效. 因此在上面示例中,所有的属性可以被返回值为字符串的方法所代替. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |