Angular入门 03-$scope作用域、数据绑定

一、作用域 Scope

1.1 什么是作用域

基于动态绑定，我们可以依赖视图在修改数据时立刻更新$scope，也可以依赖$scope在其发生变化时立刻重新渲染视图。

AngularJS将$scope设计成和DOM类似的结构，因此$scope可以进行嵌套，也就是说我们可以引用父级$scope中的属性。

1.2 作用域的作用

作用域有如下基本功能：
1、提供观察者$watch以监视数据模型的变化
2、可以将数据模型的变化通知$digest给整个应用，甚至是系统外的组件；
3、可以进行嵌套，隔离业务功能和数据；
4、给表达式提供运算时所需的执行环境。

作用域包含了渲染视图时所需的功能和数据，它是所有视图的唯一源头。可以将作用域理解成视图模型（view model）。

1.3 顶级作用域$rootScope

AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定,一般在html上来设置ng-app应用。$rootScope是所有$scope对象的最上层。
通过run(）方法可以对rootScope设置属性和方法
例：

angular.module('app'，[]).run(function($rootScope) {
    $rootScope.name = "张三";
});

二、数据绑定

在angular中，通过ng-model指令，ng-bind指令，以及{{}}表达式都可以将应用中的数据绑定到视图中。
1）、ng-model指令
ng-model指令通常用在表单input元素中进行数据绑定。
如下：将scope中的name数据值与input框进行了绑定，因为angular的双向绑定机制，在input框中输入值会实时的同步到model中去，使下面的{{name}}表达式的值跟着变化。

 <div ng-controller="myCtrl1">
     <input type="text" ng-model="name" value="">
     <p>{{name}}</p>
 </div>

2）、ng-bind指令
ng-bind指令的作用在于将数据绑定到父元素上，使其内部显示为想要的数据
注意：ng-bind是绑定的元素，内部内容将被替换成绑定的数据。（所以最好不要在使用ng-bind指令的元素内部写其他内容）

<div ng-controller="myCtrl2" ng-bind="name">
   <h1>111</h1>
</div>

如上：111会被替换成name对应的值

3）、表达式{{expression}}
通过表达式可以简单的将应用中的数据绑定到页面视图中。

angular中的数据双向绑定

AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding)，这个特性大大简化了我们的代码编写方式。数据绑定意味着当View中有任何数据发生了变化，那么这个变化也会自动地反馈到scope的数据上，也即意味着scope模型会自动地更新。类似地，当scope模型发生变化时，view中的数据也会更新到最新的值。那么AngularJS是如何做到这一点的呢？
译文：
http://blog.csdn.net/dm_vincent/article/details/38705099?utm_source=tuicool&utm_medium=referral

实现angular双向绑定的关键点：$watch函数和$digest()循环

1）、watcher

在$scope中有一个$watch（）方法（或者说在$scope这个对象上，有一个叫$$watcher对象，它负责监视数据的改动）
\$watch()函数
它有两个参数：
参数一：监视的数据名，
参数二：数据发生变化时的回调函数。
watcher通过调用回调函数，来实现视图更新

2）、$digest（）循环检查

watch只是负责监测数据变化，而真正触发它的回调函数执行的操作则是通过$digest()来完成的。
angular通过其脏检查机制（Dirty Checking），每隔一定时间就开始一次\$digest()循环检查。在每次\$digest循环中，会调用\$watch()来检查其对应的数据是否发生变化（每定义一条数据就会自动注册一个watcher），如果数据发生了变化就会触发其对应的回调函数来更新视图。

实例：

在angular中使用非angular自有的函数来改变其model数据时，是不会同部到视图层中的。
如下：

app.controller('myCtrl2',function($scope){
    $scope.name="李四";
 //定时器3秒后触发，改变name的值，但页面中的数据还是原来的值（李四）
    window.setTimeout(function(){
        $scope.name="小五";
        console.log($scope.name);  //小五
    },3000)
})

改进：通过手动触发$digest()，来通过watcher回调函数改变数据

app.controller('myCtrl2',function($scope){
    $scope.name="李四";
    window.setTimeout(function(){
        $scope.name="小五";
        console.log($scope.name);
        $scope.$digest();  //手动通知
    },3000)

})