Page 80 - AngularJS权威教程
P. 80
60 第 9 章 内置指令
<button ng-click="someAction()"></button>
</body>
</html>
angular.module('myApp', [])
.run(function($rootScope) {
$rootScope.someProperty = 'hello computer';
$rootScope.someAction = function() {
$rootScope.someProperty = 'hello human';
};
});
在线示例:http://jsbin.com/ICOzeFI/2/edit。
这里为了演示方便,像使用全局作用域一样使用$rootScope,实际生产中不建议这样做。
可以在整个文档中只使用一次ng-app。如果需要在一个页面中放置多个AngularJS应用,需
要手动引导应用。第24章会深入讨论手动引导应用。
2. ng-controller
内置指令ng-controller的作用是为嵌套在其中的指令创建一个子作用域,避免将所有操作
和模型都定义在$rootScope上。用这个指令可以在一个DOM元素上放置控制器。
ng-controller接受一个参数expression,这个参数是必需的。
expression参数是一个AngularJS表达式。
子$scope只是一个JavaScript对象,其中含有从父级$scope中通过原型继承得到的方法和属
性,包括应用的$rootScope。
嵌套在ng-controller中的指令有访问新子$scope的权限,但是要牢记每个指令都应该遵守
的和作用域相关的规则。
回想一下,$scope对象的职责是承载DOM中指令所共享的操作和模型。
操作指的是$scope上的标准JavaScript方法。
模型指的是$scope上保存的包含瞬时状态数据的JavaScript对象。持久化状态的
数据应该保存到服务中,服务的作用是处理模型的持久化。
出于技术和架构方面的原因,绝对不要直接将控制器中的$scope赋值为值类型
对象(字符串、布尔值或数字)。DOM中应该始终通过点操作符.来访问数据。
遵守这个规则将使你远离不可预期的麻烦。
控制器应该尽可能简单。虽然可以用控制器来组织所有功能,但是将业务逻辑
移到服务和指令中是非常好的主意。查看第21章中的详细内容。
有了控制器,我们可以将之前的例子改造一下,把数据和操作放到子作用域中:
<div ng-controller="SomeController">