本篇我們看一下AngularJS中的數據綁定。雖然我們直到這篇才提到數據綁定，但事實上在前面幾篇中我們已經非常熟練的運用AngularJS的數據綁定功能了！
ngBind（ng-bind）/ {{ expression }}：
1 <!DOCTYPE > 2 <html> 3 <head> 4 <script src="/Scripts/angular.js"></script> 5 </head> 6 <body ng-app> 7 <input ng-model="yourName" /> 8 <p> 9 Hello, {{yourName}} 10 </p> 11 <p> 12 Use ngBind to display: <span ng-bind="yourName"></span> 13 </p> 14 </body> 15 </html>
如果你已經看過前面幾篇文章，我相信你已經非常熟悉這樣的代碼了。AngualrJS中使用ngBind進行數據綁定，但是我們更多的會使用Expression（即{{expression}}這樣的寫法）替代ngBind，這種寫法更簡便直觀。
AngularJS還提供了其他幾種數據綁定方式：
ngBindHtml:
1 <!DOCTYPE > 2 <html> 3 <head> 4 <script src="/Scripts/angular.js"></script> 5 <script src="/Scripts/angular-sanitize.js"></script> 6 <script type="text/javascript"> 7 (function () { 8 var app = angular.module('twowayBindingTest', ['ngSanitize']); 9 10 app.controller('myController', ['$scope', function ($scope) { 11 $scope.myHtml = "This is a link: <a href=\"#\">Mylink</a>"; 12 }]); 13 })(); 14 </script> 15 </head> 16 <body ng-app="twowayBindingTest" ng-controller="myController"> 17 <div> 18 <span ng-bind-html="myHtml"></span> 19 </div> 20 </body> 21 </html>
ngBindHtml(ng-bind-html)可以將一個字符串以安全的方式插入到頁面中並顯示成Html。
ngBindHtml將強制使用angular-santitize服務進行安全檢查，由於並非包含在AngualrJS核心庫中，因此需要引入angular-santitize.js文件，並在定義ngModule時添加對於ngSantitize的依賴聲明。
關於AngularJS的服務我們將在今后再統一討論，這里就不展開了。
ngBindTemplate：
1 <!DOCTYPE > 2 <html> 3 <head> 4 <script src="/Scripts/angular.js"></script> 5 </head> 6 <body ng-app> 7 Name:<input ng-model="yourName" /> 8 <br /> 9 Age:<input ng-model="yourAge" /> 10 <p> 11 <span ng-bind-template="This is {{yourName}}, I'm {{yourAge}} years old."></span> 12 </p> 13 </body> 14 </html>
ngBindTemplate（ng-bind-template）與ngBind不同之處在於：ngBind只能單個綁定變量，且變量無需使用雙括號“{{}}”，而ngBindTemplate則可以綁定一個模板，模板中可以包含多個AngularJS的表達式：“{{expression}}”。
ngNonBindable:
1 <!DOCTYPE > 2 <html> 3 <head> 4 <script src="/Scripts/angular.js"></script> 5 </head> 6 <body ng-app> 7 <div ng-non-bindable>This will not be changed: {{1 + 2}}</div> 8 </body> 9 </html>
當然，如果你頁面上正好有"{{ my content }}" 這樣的內容，不需要執行AngularJS幫你進行編譯和計算，使用ngNonBindable（ng-non-binable），AngularJS會自動忽略該內容。
使用ngModel實現Twoway Binding：
1 <!DOCTYPE > 2 <html> 3 <head> 4 <script src="/Scripts/angular.js"></script> 5 <script type="text/javascript"> 6 (function () { 7 var app = angular.module('twowayBindingTest', []); 8 9 app.controller('myController', ['$scope', function ($scope) { 10 $scope.students = []; 11 12 $scope.addStudent = function (stu) { 13 $scope.students.push(stu); 14 $scope.stu = {}; 15 }; 16 17 $scope.removeStudent = function (index) { 18 $scope.students.splice(index, 1); 19 }; 20 }]); 21 22 23 })(); 24 </script> 25 </head> 26 <body ng-app="twowayBindingTest" ng-controller="myController"> 27 <div> 28 <p>Name:<input ng-model="stu.name"></input></p> 29 <p>Age:<input ng-model="stu.age"></input></p> 30 <input type="button" ng-click="addStudent(stu)" value="Add" /> 31 </div> 32 <hr /> 33 <div ng-repeat="stu in students"> 34 <span ng-hide="editMode">{{stu.name}}</span> 35 <input type="text" ng-show="editMode" ng-model="stu.name" /> 36 37 <span ng-hide="editMode">{{stu.age}}</span> 38 <input type="text" ng-show="editMode" ng-model="stu.age" /> 39 40 <input type="button" value="Edit" ng-hide="editMode" ng-click="editMode = true" /> 41 <input type="button" value="Save" ng-show="editMode" ng-click="editMode = false" /> 42 <input type="button" value="Remove" ng-hide="editMode" ng-click="removeStudent($index)" /> 43 <hr /> 44 </div> 45 </body> 46 </html>
上面的代碼就展示了AngularJS中的雙向綁定的用法。如果你仔細看完代碼並執行一下，就會發現雙向綁定的奇妙之處。
<input type="button" value="Edit" ng-hide="editMode" ng-click="editMode = true" /> <input type="button" value="Save" ng-show="editMode" ng-click="editMode = false" />
編輯、保存按鈕的代碼非常簡單，都不需要添加業務邏輯，因為是雙向綁定，當改變輸入框內的內容並點擊Save之后，由於span中的stu.name和stu.age以及$scope.students中相應的記錄的name和age指向了相同的ng-model，因此AngularJS會自動完成這三者之間的同步變更。因此你都不需要編寫額外的代碼去完成編輯、保存這樣的行為，這就是雙向綁定帶來的奇妙體驗。
本篇講述了AngularJS中的數據綁定，是不是很簡單但也超級實用呢？
參考資料
AngularJS官方文檔：https://docs.angularjs.org/api/
CodeSchool快速入門視頻：http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
CodeProject文章：http://www.codeproject.com/Articles/808257/Part-Data-Binding-In-AngularJS