平台特性真的要好好瞭解一下，原來AngularJS有雙向資料繫結 (2-way Data Binding)的特性。
所謂雙向(2-way)是指controller與view兩邊對資料模型的操作，都會即時更新，使得controller與view兩邊的資料一致。
![[Ionic][AngularJS] 雙向資料繫結 (2-way Data Binding).png](https://cg2010studio.files.wordpress.com/2017/01/ionicangularjs-e99b99e59091e8b387e69699e7b9abe7b590-2-way-data-binding.png?w=540)
此圖解釋得相當直覺！
前人已把內容整理得相當完整，在此我直接引用我認為最為重要的部分觀念！
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變數。
發表留言