javascript
AngularJS入门心得2——何为双向数据绑定
前言：誰說Test工作比較輕松，最近在熟悉幾個case，差點(diǎn)沒瘋。最近又是斷斷續(xù)續(xù)的看我的AngularJS，總覺得自己還是沒有入門，可能是自己欠前端的東西太多了，看不了幾行代碼就有幾個常用函數(shù)不熟悉的。看過了大漠的視頻，算是了解了AngularJS的一些優(yōu)良特性。后來準(zhǔn)備投身《AngularJS權(quán)威教程》，跟著它走，可是一來可能自己道行不夠，二來，個人覺得這本書翻譯的有些生硬以及一些瑕疵，比如：
（1）9.2節(jié)：在指令中適用自作用域
（2）9.2節(jié)：在指令中適用自作用域
當(dāng)然，以上都是一些瑕疵，希望譯著作者不要見怪哈^_^!
所以，在囫圇吞棗的看到第十章，我覺得先擱置至此，去ngnice看看。可能我還是需要一些概念上的輸入，比如雙向數(shù)據(jù)綁定、表達(dá)式、指令等等。
?
正文：今天主要介紹AngularJS雙向數(shù)據(jù)綁定
1.理論介紹
什么是雙向數(shù)據(jù)綁定？既然號稱雙向數(shù)據(jù)綁定，重點(diǎn)肯定在“雙向”上了，顯然，有雙向必有單向，那兩者有何區(qū)別，先看下面兩幅圖：
上圖：單向綁定
它們將模板和數(shù)據(jù)合并起來加入到視圖中去，如圖表中所示。合并完成之后，從圖中的流向可以看出，任何對數(shù)據(jù)模型或者相關(guān)內(nèi)容的改變都不會自動反映到視圖中去。而且用戶對視圖的任何改變也不會自動同步到數(shù)據(jù)模型中來。這意味著，開發(fā)者需要編寫代碼來保持視圖與模板、模板與視圖的同步，無疑增加了開發(fā)的工作量。
那么有沒有可以自動實(shí)現(xiàn)這種雙向機(jī)制的框架，有，請看：
下圖：雙向綁定
AngularJS的數(shù)據(jù)綁定是數(shù)據(jù)模型(model)與視圖(view)組件的自動同步。Angular的實(shí)現(xiàn)方式允許你把應(yīng)用中的模型看成單一數(shù)據(jù)源。而視圖始終是數(shù)據(jù)模型的一種展現(xiàn)形式。當(dāng)模型改變時，視圖就能反映這種改變，反之亦然。
?
2. 代碼演示
html:
<!doctype html> <html ng-app="MyModule"><head><meta charset="utf-8"></head><body><div ng-controller="HelloAngular"><p>{{greeting.text}},Angular</p></div></body><script src="js/angular-1.3.0.js"></script><script src="HelloAngular_MVC.js"></script> </html>js:
var myModule = angular.module('MyModule', []);myModule .controller('HelloAngular', ['$scope',$scope.greeting = {text: 'Hello'}; ]);運(yùn)行結(jié)果:Hello,Angular
解讀：這里的"{{}}"相當(dāng)于"ng-model"指令，其實(shí)就是一種綁定，但是僅從這個例子，不能說實(shí)現(xiàn)了雙向數(shù)據(jù)綁定。這里是將AngularJS的數(shù)據(jù)模型（Model）的值綁定到了視圖（View）上了，如果html文件中沒有引入
?
<script src="HelloAngular_MVC.js"></script>?
則通過運(yùn)行發(fā)現(xiàn)界面實(shí)現(xiàn)的是：{{greeting.text}},Angular
也就是說AngularJS的scope中的模型值沒有綁定到前臺界面html中。反之，引入了HelloAngular_MVC.js，則實(shí)現(xiàn)在前端界面中映射到了數(shù)據(jù)模型數(shù)據(jù)。
?
上面介紹的不能算是雙向數(shù)據(jù)綁定，下面引出真正的雙向綁定，那么雙向數(shù)據(jù)綁定有何應(yīng)用場景，什么樣的情況需要數(shù)據(jù)模型與視圖能夠相互映射相互影響呢，可能是你沒有察覺，現(xiàn)在很多的網(wǎng)站都能看到這種思想帶來的極大便捷，比如說表單，在填寫或提交表單時，界面上會根據(jù)用戶的操作做出及時的相應(yīng)，這就是一種雙向數(shù)據(jù)綁定的最有力的應(yīng)用場景。
html：
<!doctype html> <html ng-app="MyModule"><head><meta charset="utf-8"></head><body><div ng-controller="HelloAngular"><input ng-model="greeting.text"/><p>{{greeting.text}},Angular</p></div></body><script src="js/angular-1.3.0.js"></script><script src="HelloAngular_MVC.js"></script> </html>js（還是上例中的js）：
var myModule = angular.module('MyModule', []);myModule .controller('HelloAngular', ['$scope',$scope.greeting = {text: 'Hello'}; ]);運(yùn)行結(jié)果：
注意：這個例子很好地詮釋了什么是雙向綁定。
首先在html中聲明了兩個標(biāo)簽：一個輸入框<input>和一個段落標(biāo)記<p>。
顯然采用了兩種綁定的方式：{{}}和ng-model，但是功能都是數(shù)據(jù)綁定，與js文件中控制器中的greeting.text進(jìn)行了綁定。所以，通過js中g(shù)reeting.text的賦值會使得前臺Html中input和p同時顯示“Hello”
這一步完成的是AngularJS的scope中的數(shù)據(jù)模型綁定了的前臺View中，那么前臺的數(shù)據(jù)變化是否會影響到數(shù)據(jù)模型，通過改變input中的值，我們得到結(jié)果：
在輸入框中的任何輸入都會及時的反應(yīng)在下面的段落中，這也說明了在Html中改變數(shù)據(jù)也會及時的映射到后臺數(shù)據(jù)模型，真正的實(shí)現(xiàn)了雙向數(shù)據(jù)綁定。
本想在本篇再介紹下AngularJS的表達(dá)式，限于時間和篇幅，留在下篇吧，如果覺得有用，記得點(diǎn)贊，同時本文也會推送到公眾號：JackieZheng，歡迎關(guān)注哈^_^
本文鏈接：《AngularJS入門心得2——何為雙向數(shù)據(jù)綁定》
如果您覺得閱讀本文對您有幫助，請點(diǎn)一下“推薦”按鈕，您的“推薦”將是我最大的寫作動力！如果您想持續(xù)關(guān)注我的文章，請掃描二維碼，關(guān)注JackieZheng的微信公眾號，我會將我的文章推送給您，并和您一起分享我日常閱讀過的優(yōu)質(zhì)文章。
友情贊助
如果你覺得博主的文章對你那么一點(diǎn)小幫助，恰巧你又有想打賞博主的小沖動，那么事不宜遲，趕緊掃一掃，小額地贊助下，攢個奶粉錢，也是讓博主有動力繼續(xù)努力，寫出更好的文章^^。
1. 支付寶 2. 微信
?
總結(jié)
以上是生活随笔為你收集整理的AngularJS入门心得2——何为双向数据绑定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： unity, 相机空间 与 相机game
- 下一篇： reinterpret_cast和sta