AngularJS中的单向,双向,3向,......或更多数据绑定?

时间:2014-12-11 22:01:46

标签: angularjs data-binding angular-ngmodel

粗略地说,单向数据绑定只是在页面内与ng-model绑定,在涉及控制器时双向绑定。有人可以向我解释这个概念,所以我真的明白如何看待它?什么是3路数据绑定,还有4路,5路?

4 个答案:

答案 0 :(得分:21)

(来自JohnAndrews的回答) 单向数据绑定=您的数据模型通常从控制器插入到视图/模板中,并且控制器中对模型的更改会更改视图中的数据。 双向数据绑定=与上述相同,但您也可以在视图中更改数据模型。

3-way =您的数据与远程存储同步(loke CouchDB) 4-way =您的数据与本地数据库(如localStorage或类似数据库)同步,并且该数据库与远程存储同步

来源https://docs.google.com/presentation/d/1NByDXl6YL6BJ6nL0G2DLyZs5Og2njE_MNJv6vNK5aoo/edit#slide=id.g34d447b28_10

答案 1 :(得分:6)

单向数据绑定:非常简单。这是模型更新视图/模板。

双向数据绑定:此处模型填充视图,视图中的任何更改都会自动反映在模型中,反之亦然。例如

<input type="text" ng-model="name"/>
<h1>Hello {{name}}!</h1>

所以在这里,输入字段的值绑定到模型,即'name'。每当“名称”发生变化时,它就会立即在页面上更新。

想到图像,b'use不能发布它:(

型号&lt; ===&gt; DOM

三向数据绑定

Firebase&lt; =====&gt;型号&lt; =====&gt; DOM

这里,像数据库服务器这样的firebase只能更新不是DOM ieUI的模型。 模型可以更新数据库服务器,即firebase和DOM。所以模型有权更新UI和数据库服务器:) 该模型可以填充DOM,即UI,反之亦然。

答案 2 :(得分:1)

单向数据绑定=您的数据模型通常从控制器插入到您的视图/模板中,并且更改为控制器中的模型会更改视图中的数据。但不是相反。

双向数据绑定=与上述相同,但您也可以在视图中更改数据模型。 例如,如果您的控制器中有 $ scope.title 并将其绑定到&lt; input ng-model =“title”&gt; ,则对$的任何更改控制器中的scope.title更改输入中的任何内容,输入值的任何更改都会更改$ scope.title变量=双向绑定。

答案 3 :(得分:0)

简短回答 -

1路表示HTML(ng-model / {{}})中的值被范围变量中的值替换。

2路变量和占位符/ html(ng-model / {{}})值始终相等

3路当数据与服务器或数据库同步时,让服务器参与双向同步。

//这么多......