数据绑定进一步讲解 --- 及数据绑定的最佳实践

AngualrJS中会使用$digest()循环来检测脏值：

当AngularJS认为某个值可能发生变化时，它会运行自己的事件循环来检查这个值是否变“脏”。如果该值从上次事件循环运行之后发生了变化，则该值被认为是“脏”值。这也是Angular可以跟踪和响应应用变化的方式。

这个过程被称作脏检查（dirty checking）。脏检查是检查数据模型变化的有效手段。当有潜在的变化存在时，AngularJS会在事件循环时执行脏检查来保证数据的一致性。

简单的数据绑定

审阅一下上一篇写的代码，用到了ng-model指令将内部数据模型对象'($scope)'中的name属性绑定到了文本输入字段上。
这意味着无论在文本输入字段中输入了什么，都会同步到数据模型中。

数据模型对象（model object）是指$scope对象。
$scope对象是一个简单的JavaScript对象，其中的属性可以被视图访问，也可以同控制器进行交互。如果
不理解这个概念也没有关系，后面的例子将会对这个概念进行详细说明。
双向数据绑定（bi-directional）意味着如果视图改变了某个值，数据模型会通过
脏检查观察到这个变化，而如果数据模型改变了某个值，视图也会依据变化重新渲染。

HTML

<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="lib/angular.min.js"></script>
    <script src="lib/clock.js"></script>
</head>
<body>
    <div ng-controller="ClockController">
        <h1>hello{{ clock }}!</h1>
    </div>
</body>
</html>

JS

var clock = angular.module('myApp', []);

clock.controller('ClockController', function($scope, $timeout) {
    var updateClock = function() {
        $scope.clock = new Date();
        $timeout(function() {
            updateClock();
        }, 1000);
    };

    updateClock();
});

数据绑定的最佳实践

如果吧这个最佳实践应用到上面的时钟的例子中，需要把视图中的代码改成下面的这样：
HTML

<div ng-controller="ClockController">
   <h1>hello{{ clock.now }}!</h1>
</div>

JS

var clock = angular.module('myApp', []);

clock.controller('ClockController', function($scope, $timeout) {
    $scope.clock = {
        now: new Date()
    };

    var updateClock = function() {
        $scope.clock.now = new Date();
    };

    setInterval(function() {
        $scope.$apply(updateClock);
    }, 1000);

    updateClock();
});
posted @ 2015-03-26 14:10  小数  阅读(290)  评论(0)  编辑  收藏  举报