新版不朽情缘输几十万

書名： AngularJS入門與進階
作者名：江榮波
本章字數： 921字
更新時間： 2020-11-28 23:44:29

2.2 ng-model指令

為了建立數據綁定，我們需要用到AngularJS另外一個內置指令ng-model，該指令只能用在表單元素上，使用方法如下：

        <input type="text" name="uname"  ng-model="uname" />

在input輸入框上添加ng-model指令后，AngularJS框架就會在對應的作用域中創建一個uname屬性和該輸入框進行綁定。

數據綁定是AngularJS最優秀的特性之一，下面以一個案例來說明AngularJS數據綁定機制的好處。假如我們要完成這樣一個功能，即把用戶在表單中輸入的信息動態回顯到頁面中。

如果使用原生的JavaScript，可以通過document對象的getElementById()方法獲取輸入框對象，響應輸入框的keyup事件，在輸入框的keyup事件響應方法中獲取輸入框內容，然后同樣以操作DOM的方式把輸入框內容顯示到頁面中，具體代碼如下：

代碼清單：ch02\ch02_01.html

        <!doctype html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>ch02_01</title>
        </head>
        <body >
            <div>用戶名：<input type="text" name="uname" id="uname" /></div>
            <div><span id="info"></span></div>
            <script type="text/javascript">
                var uname = document.getElementById（"uname"）;
                var info = document.getElementById（"info"）;
                uname.onkeyup = function(){
                    info.innerHTML = uname.value;
                }
            </script>
        </body>
        </html>

上面的代碼非常簡單，相信讀者都能看懂，接下來在瀏覽器中運行ch02_01.html頁面，效果如圖2.2所示。

圖2.2 動態回顯用戶輸入示例

可以看到界面上顯示的內容隨著輸入的改變而動態改變。本例中我們編寫了數行JavaScript代碼，為了突出AngularJS數據綁定機制的優勢，我們再使用AngularJS數據綁定機制來完成這個案例，具體代碼如下：

代碼清單：ch02\ch02_02.html

        <!doctype html>
        <html ng-app>
        <head>
            <meta charset="UTF-8">
            <title>ch02_02</title>
            <script type="text/javascript" src="../angular-1.5.5/angular.js">
            </script>
        </head>
        <body >
            <div>用戶名：<input type="text" ng-model="uname" /></div>
            <div>{{uname}}</div>
        </body>
        </html>

在瀏覽器中運行ch02_02.html頁面，就會發現運行效果和上一個案例完全相同，但是本案例中的核心代碼僅僅只有下面兩行：

        <div>用戶名：<input type="text" ng-model="uname" /></div>
        <div>{{uname}}</div>

如上面的代碼所示，我們甚至連一行JavaScript代碼都沒有編寫就完成了這個功能，到底是怎樣做到的呢？下面對該應用進行剖析：

上面案例中的ng-app指令用于啟動AngularJS應用。需要注意的一點是，當AngularJS遇到ng-app指令時就會創建一個名為$rootSocpe的作用域，該作用域為AngularJS應用的根作用域。

作用域其實是一個簡單的JavaScript對象，形式如下：

     var $rootScope={uname:”江榮波"};

我們把ng-model指令作為屬性添加到input標簽中，此時AngularJS會在$rootSocpe作用域中添加一個uname屬性和input輸入框綁定，當我們在input表單中輸入內容時，AngularJS會自動把輸入的內容同步到作用域的uname屬性中，因此我們不需要自己響應input標簽的keyup事件去處理。

{{uname}}為AngularJS的表達式形式，可以訪問AngularJS作用域里的屬性，這里我們使用表達式把uname屬性輸出到頁面中。同時AngularJS還能夠監視作用域中數據的變化，當數據發生變化時，頁面顯示內容也能夠得到實時更新。

注意

在上面的例子中，我們向$rootScope作用域中添加屬性進行了數據綁定，會造成全局作用域污染，實際項目中并不會這么做，而是把表單和控制器作用域中的屬性進行數據綁定。控制器作用域是根作用域$rootScope的子作用域，后面會接觸到。

官术网_书友最值得收藏!

AngularJS入門與進階

2.2 ng-model指令