AngularJS語法基礎及數據綁定——詳解各種數據綁定指令、屬性應用
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 等直接綁定數據，那麽系統默認這就是聲明了一個全局變量。
AngularJS語法基礎及數據綁定——詳解各種數據綁定指令、屬性應用