1. 首页
  2. 开发

angularjs入门——简单的数据绑定

自动数据绑定使我们可以将视图理解为模型状态的映射。当客户端的数据模型发生变化时,视图就能反映出这些变化,并且不需要写任何自定义的代码,它就可以工作。
在MVC(Model View Controller,模型视图控制器)的世界里,控制器可以不必担心会牵扯到渲染视图的工作。这样我们就不必再担心如何分离视图和控制器逻辑,并且也可以使测试变得既简单又令人愉悦。

<!DOCTYPE html> 
<html ng-app> 
    <head> 
	<title>Simple app</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script> 
    </head> 
    <body> 
	<input ng-model="name" type="text" placeholder="Your name"> 
	<h1>Hello {{ name }}</h1> 
    </body> 
</html> 

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

数据模型对象(model object)

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

收藏

暂无评论

登录后可以进行评论。没有账号?马上注册