作用域
- [x] 完美的架构是将业务逻辑都放在控制器中,而将相关的数据都放在控制器的作用域中。
作用域的基本功能
- 提供观察者以监视数据模型的变化
- 将变化通知给整个应用,甚至系统外的组件
- 可以进行嵌套,隔离业务功能和数据
- 给表达式提供运算时所需执行的环境
- [x] ng-controller指令是作用域创建指令
作用域层级
var HelloCtrl = function(){
$scope.name = 'world';
}
HelloCtrl看起来像一般的JavaScript构造函数,只有$scope参数令人疑惑,它是从何而来的呢?
- [x] 答案是 ng-controller指令会调用scope对象的 new()方法创建新的作用域 scope.
- [x] 看上去需要至少一个作用域实例才能创建新的作用域。
- [x] AngularJS拥有$rootScope,它是其它所有作用域的父作用域。
<body ng-app="usersApp">
<div ng-controller="MyController">
<h1>hello {{name}}!</h1>
</div>
<script>
var app=angular.module('usersApp',[])
app.controller('MyController',function($scope){
$scope.name="Lrn"
})
</script>
</body>
- [x] ng-controller指令为这个DOM元素创建了一个新的 scope对象,并将其嵌套在 rootscope中。
在DOM树中,会有很多指令创建出很多作用域,一些指令会创建子作用域,我们会奇怪为什什么要搞得那么复杂。为了说明原因,我们来看使用ng-repeat重复器(repeater)指令的例子。
作用域のng-repeat
<script>
var app = angular.module("myApp",[]);
app.controller("WorldCtrl",function($scope){
$scope.populations = 7000;
$scope.countries =[{name:'France',population:63.1},{name:'UK',population:64.3}]
})
</script>
</head>
<body>
<ul ng-controller="WorldCtrl">
<li ng-repeat="country in countries">
{{country.name}} has population of {{country.population}}
</li>
<hr>
World's population:{{population}} millions.
</ul>
</body>
- [x] ng-repeat指令为国家集合中每个国家创建新的DOM元素。
- [x] 对应每项创建新变量country,并暴露给$scope以在视图中渲染。