1. 程式人生 > >AngularJS核心特性——雙向資料繫結

AngularJS核心特性——雙向資料繫結

一 單向資料繫結

目前大多數前端框架都是單向資料繫結: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>

四 執行效果