下面将要介绍的指令会以父级作用域为原型生成子作用域。这种继承的机制可以创建一个隔离层,用来将需要协同工作的方法和数据模型对象放置在一起。 13
ng-app和ng-controller是特殊的指令,因为它们会修改嵌套在它们内部的指令的作用域。ng-app 为 AngularJS 应 用 创 建 $rootScope , ng-controller 则 会 以 $rootScope 或 另 外 一 个
ng-controller的作用域为原型创建新的子作用域。1. ng-app
任何具有ng-app属性的DOM元素将被标记为$rootScope的起始点。$rootScope是作用域链的起始点,任何嵌套在ng-app内的指令都会继承它。在JavaScript代码中通过run方法来访问$rootScope。
<html ng-app="myApp">
<body>
{{ someProperty }}
<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中指令所共享的操作和模型。