2、理解数据绑定

    自动数据绑定使我们可以将视图理解为模型状态的映射。当客户端的数据模型发生变化时，视图就能反映出这些变化，并且不需要写任何自定义的代码，它就可以工作。

    AngularJS会记录数据模型所包含的数据在任何特定时间点的值（在HelloWorld例子中就是name的值），而不是原始值。

     数据模型对象（modelobject）是指$scope对象。$scope对象是一个简单的JavaScript对象，其中的属性可以被视图访问，也可以同控制器进行交互。双向数据绑定（bi-directional）意味着如果视图改变了某个值，数据模型会通过脏检查观察到这个变化，而如果数据模型改变了某个值，视图也会依据变化重新渲染。

数据绑定的最佳实践

由于JavaScript自身的特点，以及它在传递值和引用时的不同处理方式，通常认为，在视图中

通过对象的属性而非对象本身来进行引用绑定，是Angular中的最佳实践。

/*

 * 时钟测试

 */

myDirec.controller("clockControl", function($scope,$timeout) {

   var updateClock = function() {

       $scope.clock = new Date();

       $timeout(function() {

            updateClock();

       }, 1000);

   };

   updateClock();

});

/*

 * 数据绑定最佳实践（改进后）

 */

myDirec.controller("clockControl2", function($scope, $timeout) {

    $scope.clock = {

        now : new Date()

    };

    var updateClock = function() {

        $scope.clock.now = new Date();

    };

    setInterval(function() {

       $scope.$apply(updateClock);

    }, 1000);

   updateClock();

});

 

页面测试：

<h3>数据绑定测试（时钟）</h3>  

 <div ng-controller="clockControl">

<h1>Hello {{ clock }}!</h1>

</div>

<!--数据绑定最佳实践  -->

 <div ng-controller="clockControl2">

<h1>Hello {{ clock.now }}!</h1>

</div>