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

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();
});

你可能感兴趣的:(最佳实践)