Just a Computer Graphics Studio & My Life

平台特性真的要好好瞭解一下,原來AngularJS雙向資料繫結 (2-way Data Binding)的特性。

所謂雙向(2-way)是指controller與view兩邊對資料模型的操作,都會即時更新,使得controller與view兩邊的資料一致。

[Ionic][AngularJS] 雙向資料繫結 (2-way Data Binding).png

此圖解釋得相當直覺!

前人已把內容整理得相當完整,在此我直接引用我認為最為重要的部分觀念!

ng-model, ng-click, $scope定義的變數與函式

以一個帳號、密碼登入的畫面為例,首先須在controller端,以$scope設定「資料模型」變數,例如:

.controller('LoginCtrl', function($scope){
    $scope.data = {
        name:'',
        passwd:''
    };
});

接著,便可在頁面端的標籤內(如input標籤)使用ng-model指令,設定輸入欄位所對應之資料模型變數,例如:

<input type='text' ng-model = 'data.name'>
<input type='password' ng-model = 'data.passwd'>

.

兩端做完對應之後,頁面輸入的資料,便可供controller處理使用,此即雙向(2-way)之意涵。

另一種設定資料繫結的方式則是以兩對大括弧,將$scope定義的「變數名」包起來,如{{變數名}}。此外,頁面端也可為按鈕設定ng-click,指定點選按鈕時,應呼叫$scope所定義的那一個函式。相關controller與頁面的程式碼如下:

.controller('LoginCtrl', function($scope){
    $scope.data = {
        name:'',
        passwd:''
    };
    $scope.label = '登入';

    $scope.login = function(){
        // user login process
    } ; 
};

.

要注意的是,兩個$scope資料模型變數data與label的差異。此處data為物件,頁面資料輸入更新的同時,controller也會同步更新。但相對的,一般變數label,如果在頁面有更新內容,在controller端並不會同步。因此,頁面HTML檔用到ng-model的部分,其對應的$scope資料模型變數必須是「物件」,否則頁面更新變數內容時,controller端並不會同步更新。

<ion-view>
  <ion-content>
    <!--...略...-->
    <p>{{label}}</p>
    <input type='text' ng-model = 'data.name'>
    <input type='password' ng-model = 'data.passwd'>
    <button ng-click='login()'>登入</button> 
    <!--...略...-->
  <ion-content>
</ion-view>

.

總之,雙向資料繫結(2-way data binding)透過ng-model, ng-click以及controller內$scope變數的資料模型設定,提供了非常方便的頁面製作機制。

以上重點要牢記喔~

當然能實作去體會更好,甚至透過網路去載資料回來,觀察view是否會即時更新資料。

參考:Ionic App Views製作:ng指令與$scope變數

廣告

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: