AngularJS核心特性——雙向資料繫結
阿新 • • 發佈:2019-02-10
一 單向資料繫結
目前大多數前端框架都是單向資料繫結:JQuery、BackBone、Flex。模型發生了變化,檢視也隨之變化。
二 雙向資料繫結
一旦檢視發生了變化,模型也會發生變化。
一旦模型發生了變化,檢視也會發生變化。
三 實戰
<!--整個例子體現了雙向繫結的思想--> <!doctype html> <html ng-app><!--ng-app所作用的範圍是AngularJS起效範圍,本例是整個頁面有效--> <head> <meta charset="utf-8"> </head> <body> <div> <!--ng-model定義了整個AngularJS的前端資料模型,模型名稱是greeting.text--> <!--greeting.text模型的值來自輸入的值--> <!--若輸入的值改變,則資料模型值也改變,體現了檢視->模型方向繫結的思想--> <input ng-model="greeting.text"/> <!--使用{{模型名}}來讀取模型中的值--> <!--若資料模型改變了,則檢視輸出也改變了,體現了模型->檢視方向繫結的思想--> <p>{{greeting.text}},AngularJS</p> </div> </body> <script src="js/angular-1.3.0.js"></script><!--載入AngularJS的指令碼--> </html>
四 執行效果