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