AngularJS 指令
1、ng-app
ng-app 指令用於告訴 AngularJS 應用當前這個元素是根元素。
所有 AngularJS 應用都必須要要一個根元素。
HTML 文檔中只允許有一個 ng-app 指令，如果有多個 ng-app 指令，則只有第一個會被使用。
2、ng-bind
ng-bind 指令告訴 AngularJS 使用給定的變量或表達式的值來替換 HTML 元素的內容。
如果給定的變量或表達式修改了，指定替換的 HTML 元素也會修改。
3、ng-bind-html
ng-bind-html 指令是通一個安全的方式將內容綁定到 HTML 元素上。相當於JS的 innerHTML 屬性；
當你想讓 AngularJS 在你的應用中寫入 HTML，你就需要去檢測一些危險代碼。通過在應用中引入 "angular-santize.js" 模塊，使用 ngSanitize 函數來檢測代碼的安全性。
1 <!DOCTYPE html> 2 <html ng-app="myApp" ng-controller="myCtrl"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Angular.js的指令</title> 6</head> 7 <body> 8 <p ng-bind-html="myText"></p> 9 <script src="js/angular.js"></script> 10 <script src="js/angular-sanitize.js" type="text/javascript" charset="utf-8"></script> 11 <script> 12 var app= angular.module("myApp", [‘ngSanitize‘]); 13 app.controller("myCtrl", function($scope) { 14 $scope.myText = "<h1>p標簽裏的內容</h1>"; 15 }); 16 /* 17 * 引用 ng-bind-html 樣式，必須要引入 angular-sanitize.js； 18 * 且 在 angular.module() 的參數中攜帶 ‘ngSanitize‘ 19 */ 20 </script> 21 </body> 22 </html>
4、ng-bind-template
ng-bind-template 指令用於告訴 AngularJS 將給定表達式的值替換 HTML 元素的內容。
當你想在 HTML 元素上綁定多個表達式時可以使用 ng-bind-template 指令。
1 <div ng-bind-template="{{firstName}} {{lastName}}"> 2 <!-- 無論是什麽值都會被替代 --> 3 </div> 4 <script> 5 var app = angular.module("myApp", []); 6 app.controller("myCtrl", function($scope) { 7 $scope.firstName = "123"; 8 $scope.lastName = "123"; 9 /* 10 * ng-bind-template 是替換 HTML 標簽中的 innerHTML; 11 * 可以寫入多個值,無需引入其他 js文件 12 */ 13 }); 14 </script>
5、ng-blur（失去焦點）、ng-focus（獲得焦點）
ng-blur 指令用於告訴 AngularJS HTML 元素在失去焦點時需要執行的表達式。
AngularJS 中的 ng-blur 指令不會覆蓋原生的 onblur 事件， 如果觸發該事件，ng-blur 表達式與原生的 onblur 事件都會執行。
ng-focus 指令用於告訴 AngularJS 在 HTML 元素獲取焦點時需要執行的操作。
ng-focus 指令不會覆蓋元素的原始 onfocus 事件, 事件觸發時，ng-focus 表達式與原始的 onfocus 事件將都會執行。
6、ng-change （改變值）
ng-change 指令用於告訴 AngularJS 在 HTML 元素值改變時需要執行的操作。
ng-change 指令需要搭配 ng-model 指令使用。
AngularJS ng-change 指令指令不會覆蓋原生的 onchange 事件, 如果觸發該事件，ng-change 表達式與原生的 onchange 事件都會執行。
ng-change 事件在值的每次改變時觸發，它不需要等待一個完成的修改過程，或等待失去焦點的動作。
ng-change 事件只針對輸入框值的真實修改，而不是通過 JavaScript 來修改。
7、ng-checked（全選）
ng-checked 指令用於設置復選框(checkbox)或單選按鈕(radio)的 checked 屬性。
如果 ng-checked 屬性返回 true，復選框(checkbox)或單選按鈕(radio)將會被選中。
1 <input type="checkbox" ng-model="all"> 選中所有<br><br> 2 <input type="checkbox" ng-checked="all">1 3 <input type="checkbox" ng-checked="all">2 4 <input type="checkbox" ng-checked="all">3
8、ng-class（添加類）
ng-class 指令用於給 HTML 元素動態綁定一個或多個 CSS 類。
ng-class 指令的值可以是字符串，對象，或一個數組。
如果是字符串，多個類名使用空格分隔。
如果是對象，需要使用 key-value 對，key 為你想要添加的類名，value 是一個布爾值。只有在 value 為 true 時類才會被添加。
如果是數組，可以由字符串或對象組合組成，數組的元素可以是字符串或對象。
9、ng-class-even（偶數行）、 ng-class-odd （單行）
用於為 HTML 元素動態的綁定一個或多個 CSS 類。
需要與 ng-repeat 指令搭配使用。
建議用在表格的樣式渲染中，但是所有HTML元素都是支持的。
10、ng-click（單擊）、ng-dbclick（雙擊）
ng-click 指令告訴了 AngularJS HTML 元素被點擊後需要執行的操作。
ng-dblclick 指令用於告訴 AngularJS 在鼠標鼠標 HTML 元素時需要執行的操作。
ng-dblclick 指令不會覆蓋元素的原始 ondblclick 事件, 鼠標雙擊時，ng-dblclick 表達式與原始的 ondblclick 事件將都會執行。
ng-mousedown 指令用於告訴 AngularJS 鼠標在指定的 HTML 元素上按下時要執行的操作。
ng-mouseenter 指令用於告訴 AngularJS 鼠標在 HTML 元素穿過時要執行的操作。
ng-mouseleave 指令用於告訴 AngularJS 鼠標從 HTML 元素上移開時要執行的操作。
ng-mousemove 指令用於告訴 AngularJS 鼠標在 HTML 元素上移動時要執行的操作。
ng-mouseover 指令用於告訴 AngularJS 鼠標移動到指定的 HTML 元素上時要執行的操作。
11、ng-cloak
ng-cloak 指令用於在 AngularJS 應用在加載時防止 AngularJS 代碼未加載完而出現的問題。
AngularJS 應用在加載時，文檔可能會由於AngularJS 代碼未加載完而出現顯示 AngularJS 代碼，進而會有閃爍的效果， ng-cloak 指令是為了防止該問題的發生。
<div ng-cloak> </div>
12、ng-controller
ng-controller 指令用於為你的應用添加控制器。
在控制器中，你可以編寫代碼，制作函數和變量，並使用 scope 對象來訪問。
13、ng-copy（拷貝）、ng-out（剪切事件）、ng-paste（粘貼）
ng-copy 指令用於告訴 AngularJS 在 HTML 元素文本被拷貝時要執行的操作。
ng-copy 指令不會覆蓋元素的原始 oncopy 事件, 事件觸發時，ng-copy 表達式與原始的 oncopy 事件將都會執行。
ng-paste 指令用於告訴 AngularJS 文本在 HTML 元素上粘貼時需要執行的操作。
14、ng-disabled
ng-disabled 指令設置表單輸入字段的 disabled 屬性(input, select, 或 textarea)。
如果 ng-disabled 中的表達式返回 true 則表單字段將被禁用。
15、ng-hide（隱藏）、ng-show（顯示）
ng-hide 指令在表達式為 true 時隱藏 HTML 元素。
ng-hide 是 AngularJS 的預定義類，設置元素的 display 為 none。
ng-show 指令在表達式為 true 時顯示指定的 HTML 元素，否則隱藏指定的 HTML 元素。
16、ng-href（鏈接）
ng-href 指令覆蓋了原生的 <a> 元素 href 屬性。
如果在 href 的值中有 AngularJS 代碼，則需要使用 ng-href 而不是 href。
ng-href 指令確保了鏈接是正常的，即使在 AngularJS 執行代碼前點擊鏈接。
17、ng-if、ng-repeat（for循環）（*****）
ng-if 指令用於在表達式為 false 時移除 HTML 元素。
如果 if 語句執行的結果為 true，會添加移除元素，並顯示。
ng-if 指令不同於 ng-hide， ng-hide 隱藏元素，而 ng-if 是從 DOM 中移除元素。
ng-repeat 指令用於循環輸出指定次數的 HTML 元素。
18、ng-init（*****）
ng-init 指令執行給定的表達式。
ng-init 指令添加一些不必要的邏輯到 scope 中，
19、ng-keydown
ng-keydown 指令用於告訴 AngularJS 在指定 HTML 元素上按下按鍵時需要的操作。
ng-keydown 指令不會覆蓋元素的原生 onkeydown 事件, 事件觸發時，ng-keydown 表達式與原生的 onkeydown 事件將都會執行。
Keydown（按下鍵觸發） Keypress（數字鍵） Keyup （彈起時觸發）
20、ng-model（*****）
ng-model 指令綁定了 HTML 表單元素到 scope 變量中。
如果 scope 中不存在變量, 將會創建它。
ng-model-options 指令綁定了 HTML 表單元素到 scope 變量中；
21、ng-non-bindable
指令用於告訴 AngularJS 當前的 HTML 元素或其子元素不需要編譯。
<p ng-non-bindable>{{ 5+5 }}</p> <!-- 描述：結果為 ：{{ 5+5 }} -->
22、ng-readonly （只讀）
ng-readonly 指令用於設置表單域(input 或 textarea) 的 readonly 屬性。
如果 ng-readonly 屬性的表達式返回 true 則表單域為只讀。
23、ng-src 指令覆蓋了 <img> 元素的 src 屬性。
24、ng-style 指令為 HTML 元素添加 style 屬性。
25、ng-value 指令用於設置 input 或 select 元素的 value 屬性。
26、ng-submit 指令用於在表單提交後執行指定函數。
27、ng-switch 指令根據表達式顯示或隱藏對應的部分。
對應的子元素使用 ng-switch-when 指令，如果匹配選中選擇顯示，其他為匹配的則移除。
你可以通過使用 ng-switch-default—" "指令設置默認選項，如果都沒有匹配的情況，默認選項會顯示
AngularJS 指令