平台特性真的要好好瞭解一下,原來AngularJS有雙向資料繫結 (2-way Data Binding)的特性。
所謂雙向(2-way)是指controller與view兩邊對資料模型的操作,都會即時更新,使得controller與view兩邊的資料一致。
此圖解釋得相當直覺!
前人已把內容整理得相當完整,在此我直接引用我認為最為重要的部分觀念!
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是否會即時更新資料。
隨意留個言吧:)~