| layout | date | title | tags | categories |
|---|---|---|---|---|
post |
2013-12-26 11:05:26 +0800 |
angular入门 |
default |
note |
作用域（scope）是构成AngularJS应用的核心基础，在整个框架中都被广泛使用，因此了解 它如何工作是非常重要的。
$scope 对象是定义应用业务逻辑、控制器方法和视图属性的地方。
作用域是应用状态的基础。基于动态绑定，我们可以依赖视图在修改数据时立刻更新$scope， 也可以依赖$scope在其发生变化时立刻重新渲染视图。
AngularJS将$scope设计成和DOM类似的结构，因此$scope可以进行嵌套，也就是说我们可以引用父级$scope中的属性。
作用域提供了监视数据模型变化的能力。它允许开发者使用其中的apply机制，将数据模型的变化在整个应用范围内进行通知。我们在作用域的上下文中定义和执行表达式，同时它也是将事件通知给另一个控制器和应用其他部分的中介。
AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层。
$rootScope是AngularJS中最接近全局作用域的对象。在$rootScope上附加太多业 务逻并不是好主意，这与污染JavaScript的全局作用域是一样的。
$scope对象在AngularJS中充当数据模型，但与传统的数据模型不一样，$scope并不负责处 理和操作数据，它只是视图和HTML之间的桥梁，它是视图和控制器之间的胶水。
$scope的所有属性，都可以自动被视图访问到。假设我们有如下的HTML：
<div ng-app="myApp">
<h1>Hello {{ name }}</h1>
</div>如果希望{{ name }}变量是本地$scope的一个属性:
angular.module('myApp', [])
.run(function($rootScope) {
$rootScope.name = "World";
});因为把所有变量全部设置在 $rootScope 上容易产生命名冲突且不是那么优雅，可以
神奇的 $scope:
- $scope 是一个 POJO （Plain Old Javascript Object）
- $scope 提供了一些工具方法 $watch(), $apply()
- $scope 是表达式的执行环境（或者说是作用域）
- $scope 是一个树形结构，与 DOM 标签平行
- 子 $scope 会继承父 $scope 上的属性和方法
- 每一个 angular 应用只有一个 根$scope 对象，一般位于 ng-app 上
- $scope 可以传播事件，类似 dom事件，可以向上也可以向下
- $scope 不仅是 MVC 的基础，也是实现双向数据绑定的基础
正如ng-app 声明所有被它包含的元素都属于AngularJS 应用一样，DOM元素上的 ng-controller声明所有被它包含的元素都属于某个控制器。
$rootScope , $scope 类似 javascript 中的原型查找， 在内层$scope 中查找不到，去外层查找$rootScope.
事件传播： emmit 向上传播，冒泡； broadcast： 向下传播，类似捕获。