其中一個在 AngularJS 內相當重要的觀念就是 Data Binding (資料繫結)
在 AngularJS 的官網也有特別說明到這一點，這也是 AngularJS 相當重要的特點之一
其中 Data Binding 可以分為 One-Way 以及 Two-Way，當然 AngularJS 是建議你使用 Two-Way
先從 Onw-Way Data Binding 開始說起吧
One -Way Data Binding 的目的在於要產生 View 之前，會將定義好的樣版(Template)與
樣版內對應的模型(Model)做合併(merge)的動作，再呈現在 View 上面，但其缺點在於
如果經過一些操作之後，如果 Model 的改變了，View 上面原本的 Model 資料並不會隨著改變
接下來是 Two-Way Binding：
說穿了，Two-Way Data Binding 就是在改進上述 One-Way Data Binding 的缺點，
從上圖我們可以看到 AngularJS 會先對 Template 進行編譯的動作，並產生 View
在執行期間，只要 Model 或是 View 上面的資料進行更動，就會更新另一方
而 AngularJS 就是利用標準的 Javascript Events 去接收 View 上的改變，並透過 $scope
來進行 Model 的修改
在 AngularJS 教學 - Controller and View 有提供一個簡單的範例了，這邊就不多說
最後我介紹幾種 AngularJS 的 Data Binding 方式
- {{name}} Expression 是最簡單最快的方式
- ng-model="name" 則是建立一個 Two-way Binding 的方式之一
- ng-bind="name" 將 model 資料繫結當作 innerText 繫結到 HTML 標籤內
- ng-bind-template="User: {{name}}" 直接將樣板建立到 HTML 標籤內
- ng-non-bindable 不做任何 Data Binding
底下給一個範例，大家參考看看吧
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp">
<head>
<title>Bootstrap
Examples</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
var
demoApp = angular.module("demoApp", []);
demoApp.controller("demoCtrl", function($scope){
$scope.data = ["A", "B", "C"];
$scope.add = function(){
$scope.data.push("D");
};
});
</script>
</head>
<body>
<div ng-controller="demoCtrl">
Count: {{data.length}} <br/>
Count: <font ng-bind="data.length"></font> <br/>
<font ng-bind-template="Count: {{data.length}}"></font><br/>
Count: <input type="text" ng-model="data.length"/><br/>
Count: <font ng-non-bindable>{{data.length}}</font><br/>
<button ng-click="add()">Add</button>
</div>
</body>
</html>
沒有留言:
張貼留言