AngularJS簡單易學，但是功能強大。特别是在建構單頁面應用方面效果顯著。而 資料綁定 可以說是他被廣泛使用的最主要的優點。他舍棄了對DOM的操作方式，一切都由AngularJS來自動更新視圖，我們不必寫操作dom的代碼。接下來我們就詳細解釋下AngularJS中資料綁定的方式，及其具體的使用規則、技巧。
首先介紹下此次部落格的内容：
1.第一部分，介紹最最基本的AngularJS的根應用、控制器的基本文法，為初學者準備的。
2.第二部分，詳解如何資料綁定，3種綁定方式的差別。分别用于什麼情況。
那麼，接下來，我們就開始介紹了，對某一部分感興趣的朋友，可以直接按照大标題1、2進行閱讀。
1. AngularJS基礎文法
首先，我們看一段簡單的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS入門</title>
<style type="text/css">
div{
width: 150px;
height: 50px;
line-height: 50px;
border-radius: 25px;
background-color: darkorange;
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myControl">
</body>
<script language="JavaScript" src="js/jquery-3.1.1.min.js"></script>
<script language="JavaScript" src="js/angular.min.js"></script>
<script type="text/javascript">
// 他是鍊式文法,不同控制器可以直接在後面加點連接配接
angular.module("myApp",[])
.controller("myControl",function($scope){
$scope.d = "我是自定義的變量";
})
</script>
</html> 現在我們解釋一下上面的代碼：
ng-app="myApp" 是指定應用程式的根元素，也就是說，整個頁面我們所有的AnjularJs内容都必須包含在這個HTML标簽中。
ng-controller="myControl" 是給我們的應用添加控制器，我們通過不同名字的控制器将整個應用劃分為若幹個子產品，實作不同的功能。
angular.module("myApp",[]) .controller("myControl",function($scope，$rootscope){ $scope.d = "我是自定義的變量"; }) AnjularJs是鍊式文法,可以直接在後面加點連接配接實作調用。angular.module("myApp",[])是規定的格式化寫法，函數内第一個參數時應用的名稱；第二個參數是一個數組，注入我們需要的子產品名稱，注意此參數不可省略。controller函數，第一個參數傳入控制器名稱；第二個參數傳入一個構造函數，函數的形參$scope代指用特定義的變量是局部有效的，在目前控制器有效。$rootscope，用他定義的變量在整個app中有效，不局限于某個控制器。
$scope.d = "我是自定義的變量"; 這是定義變量，并指派。$scope定義的是目前控制器有效的局部變量；$rootscope定義的是全局變量，在整個app範圍内有效。
這裡隻是簡單的介紹了應用、處理器、變量的定義與使用，想了解的更加詳細建議去 菜鳥教程 檢視更加詳細的說明。
2. 詳解資料綁定
首先我們看一段代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS入門</title>
<style type="text/css">
div{
width: 200px;
height: 50px;
line-height: 50px;
border-radius: 25px;
background-color: darkorange;
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myControl">
<div ng-init="a='列印出我來'">下面是綁定資料的div</div>
<!--ng-bind 指令告訴 AngularJS 使用給定的變量或表達式的值來替換 HTML标簽裡的内容。-->
<div ng-bind="a">+我是原來的内容</div>
<!--{{a}}雙層大括号，裡面加變量名，也是資料綁定，但是重新整理會顯示出大括号來-->
<div>{{a}}+我是原來的内容</div>
<!--他是一個雙向綁定，将HTML内容與變量綁定在一起，無論改變哪一個的值，另一個都會發生變化-->
<input type="text" name="text" id="text" value="" ng-model="b"/>
<div ng-bind="b" ng-init="b='aaaa'"></div>
<div>{{b}}</div>
<script language="JavaScript" src="js/jquery-3.1.1.min.js"></script>
<script language="JavaScript" src="js/angular.min.js"></script>
<script type="text/javascript">
// 他是鍊式文法,不同控制器可以直接在後面加點連接配接
angular.module("myApp",[])
.controller("myControl",function($scope){
$scope.d = "我是自定義的變量";
})
</script>
</html> 其效果如下圖所示：
那麼實作資料綁定都有那些方式呢？基本上有3種:
(1) {{變量/表達式}} 通過這種方式直接綁定資料。注意：a.他是直接修改标簽的内容。原來内容不變，再插入變量的内容。b.浏覽器需要首先加載index.html頁面，渲染它，然後AngularJS才能把它解析成你期望看到的内容。是以，使用者會重新整理看到大括号的存在。c.他是單向綁定，隻能通過修改變量的值來改變标簽的内容。
(2) ng-bind="變量" 直接将變量綁定到HTML标簽中。注意：a.他是直接重置标簽的内容。原本的内容清空直接寫入新的變量的内容。b.他不會出現重新整理顯示大括号的問題。c.他是單向綁定，隻能通過修改變量的值來改變标簽的内容。
(3) ng-model="b" + ng-bind="b" 。可以了解為先将标簽的屬性值取出來綁定到變量上，再将變量綁定到另一個标簽上。
注意：a. <input>, <select>, <textarea>,元素支援該指令。也就這幾個可以輸入的表單元素可以綁定。b.ng-model綁定好的變量，可以用上述兩種方式的一種來綁定到标簽中。這個看具體的需求。c.他是一個雙向綁定，将HTML内容與變量綁定在一起，無論改變哪一個的值，另一個都會發生變化。例如上述代碼中，給變量b進行了初始化，然後input輸入框的value值就預設是b的值了。
而對于ng-model還有對應的設定他的其他參數的屬性，ng-model-options，都可以設定如下屬性值：
{updateOn: 'event'}規則指定事件發生後綁定資料
{debounce : 1000} 規定等待多少毫秒後綁定資料
{allowInvalid : true|false} 規定是否需要驗證後綁定資料
{getterSetter : true|false} 規定是否作為 getters/setters 綁定到模型
{timezone : '0100'} 規則是否使用時區
舉例說明一下，我們加入如下代碼：
<input type="text" name="text" id="text" value="" ng-model="c" ng-model-options="{debounce : 2000}"/>
<div ng-bind="c">11111</div>
<div ng-bind="d"></div> 效果如圖所示：
看圖可知，input和div的資料并沒有在一開始的時候進行綁定，而是延遲了2s左右才綁定的，至于其他屬性值的用法也就和這個大同小異了。
這裡有個地方需要提一下：就是如果在控制器當中沒有定義對應變量，而在HTML中直接 ng-bind 等直接綁定資料，那麼系統預設這就是聲明了一個全局變量。