数据绑定

来源：互联网发布：阿里云香港服务器翻墙编辑：程序博客网时间：2024/06/05 08:00

AngularJS中的数据绑定

简介

　　在一些传统框架中（如Rails–书中所提，我没用过），控制器将多个模型中的数据和模板组合在一起形成视图，并将其提供给用户。这种组合形成一种单向视图。如果没有其他JS组件，视图只会体现它渲染时的模型暴露的数据。
　　
　　而在AngularJS中，它通过实时模板来代替视图，而不是将数据合并进模板后再更新DOM。任何一个视图组件中的值都是动态替换的。这个功能可以说是AngularJS中最重要的功能之一。

数据绑定小程序

　　在开始一个程序之前。我们需要引入相关文件。然后开始一个程序。第一步就是在某个DOM元素上明确设置ng-app属性。ng-app属性声明AngularJS应用的范围。这也是它可以嵌套在HTML代码中原因。从下面这个例子开始：

<body>    <div ng-app="myApp">        <div  ng-controller="FirstController">            <input type="text" ng-model="name"/><br />            <div>Hello {{name}}</div>            <!--<h4>{{clock.now}}</h4>-->        </div>    </div><script src="../../vendor/angular/angular.min.js"></script><script src="app/index.js"></script></body>

　　当我们改变input数据框中值的时候，可以看到，{{name}}的值也会相应被替换。观察以上代码，我们使用ng-model指令将内部数据模型对象（$scope）中的name属性绑定到了文本输入字段（input）上。这意味着无论在文本输入字段输入什么，都会同步到数据模型中。

$scope

　　数据模型对象（model object）是指$scope对象。它是一个简单的JS对象。其中的属性可以被视图访问（如上述的name属性），也可以同控制器进行交互。如果在app/index.js中的FirstController控制器中设置$scope.name = 'zhangsan'，那么开始加载页面后文本输入字段中显示的就是zhangsan。当然，{{name}}也会被替换为张三。

脏检查

　　将原对象或属性保留一份快照，在某个时间，比较现在对象或属性与快照的值。不一样就表明发生变化（保留两份变量，可能要遍历对象，有性能问题）。
　
　　当AngularJS认为某个值可能发生变化时，它可能会运行自己的事件循环来检查这个值是否变化（变“脏”）。如果该值从上次循环事件之后确实发生了变化，则该值被认为是“脏”值。这也是AngularJS可以跟踪和响应应用变化的方式。

所有以ng-开头的事件执行后，都会执行脏检查。
$apply可被用来手动调用执行脏检查。（其实它通过\$digest触发脏检查）。

　　AngularJS中使用脏检查来实现双向数据绑定。双向数据绑定意味着如果视图（view）改变某个值，其数据模型（model）也会通过脏检查观察到这个变化。相同的是，数据模型（model）改变了某个值，视图（view）也会依据变化重新渲染。

如下面的时间更新程序：

<body>    <div ng-app>        <div  ng-controller="FirstController">            <h4>{{clock.now}}</h4>        </div>    </div><script src="../../vendor/angular/angular.min.js"></script><script src="app/index.js"></script></body>

//app.jsvar FirstController = function($scope){    var updateClock = function(){        $scope.clock = new Date();    }    setInterval(function($scope){        updateClock();    },1000)    updateClock();}

　　嗯？怎么回事，不是说好setInterval吗，怎么页面没有自动更新呢。原来是因为没有脏检查。将setInterval改为下面代码即可：

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

　　同时为了不让FirstController污染全局命名空间，我们可以定义一个模块myApp。
　　由于JS特点，以及它在传值和传引用时的不同处理方式。通常认为，在视图中通过对象的属性而非对象本身来进行引用绑定，是Angular的最佳实践。更改后的代码如下：
　　

<div ng-app="myApp">    <div  ng-controller="FirstController">        <h4>{{clock}}</h4>    </div></div>

//app.jsangular.module('myApp',[]).controller('FirstController',function($scope){    $scope.clock = {        now:new Date()    }    var updateClock = function(){        $scope.clock.now = new Date();    }    setInterval(function(){        $scope.$apply(updateClock);    },1000)})

1 0