数据绑定
AngularJS中的数据绑定简介 在一些传统框架中（如Rails–书中所提，我没用过），控制器将多个模型中的数据和模板组合在一起形成视图，并将其提供给用户。这种组合形成一种单向视图。如果没有其他JS组件，视图只会体现它渲染时的模型暴露的数据。 数据绑定小程序在开始一个程序之前。我们需要引入相关文件。然后开始一个程序。第一步就是在某个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控制器中设置 脏检查 将原对象或属性保留一份快照，在某个时间，比较现在对象或属性与快照的值。不一样就表明发生变化（保留两份变量，可能要遍历对象，有性能问题）。
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.js
var 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。 <div ng-app="myApp"> <div ng-controller="FirstController"> <h4>{{clock}}</h4> </div> </div>
//app.js
angular.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)
})
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |