指令（Directive）

AngularJS 有一套完整的、可擴展的、用來幫助 Web 應用開發的指令集

在 DOM 編譯期間，和 HTML 關聯著的指令會被檢測到，並且被執行

在 AngularJS 中將前綴為 ng- 這種屬性稱之為指令，其作用就是為 DOM 元素調用方法、定義行為綁定數據等

簡單說：當一個 Angular 應用啟動，Angular 就會遍歷 DOM 樹來解析 HTML，根據指令不同，完成不同操作

註意：HTML5 允許擴展的（自制的）屬性，以 data- 開頭。

AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。

二者效果相同。

1、ng-app 指令

ng-app指令用來標明一個AngularJS應用程序

標記在一個AngularJS的作用範圍的根對象上

系統執行時會自動的執行根對象範圍內的其他指令

可以在同一個頁面創建多個ng-app節點

2、ng-repeat指令

ng-repeat指令用來編譯一個數組重復創建當前元素，如

1 <ul class="messages">
2 
3     <li ng-repeat="item in messages track by $index">
4 
5         {{item}}
6 
7     </li>
 

8 
9 </ul>

3、ng-class 指令

ng-class指令可以設置一個鍵值對，用於決定是否添加一個特定的類名，鍵為class名，值為bool類型表示是否添加該類名

1 <ul class="messages">
2 
3     <li ng-repeat="item in messages track by $index" ng-class="{red:item.read}">
4 
5         {{item.content}}
6 
7     </li>
8 
9 </ul>

4、ng-show/ng-hide 指令

ng-show/ng-hide指令會根據屬性值去確定是否展示當前元素，例如ng-show=false則不會展示該元素

1 <ul class="messages">
2 
3     <li ng-repeat="item in messages track by $index" ng-show="item.read">
4 
5         {{item.content}}
6 
7     </li>
8 
9 </ul>

5、ng-if是指是否存在DOM元素

6、ng-link/ng-src 指令

ng-link/ng-src指令用於解決當鏈接類型的數據綁定時造成的加載BUG，如

1 <!-- 瀏覽器在解析HTML時會去請求{{item.url}}文件 -->
2 
3 <img src="{{item.url}}">
4 
5 <!-- 可以使用ng-src解決該問題 -->
6 
7 <img ng-src="{{item.url}}">

7、其他常用指令

ng-model

ng-class

ng-show/ng-hide/ng-if

ng-click

ng-link/ng-src

8、自定義指令

AngularJS中可以通過代碼自定義指令：

 1 myModule.directive(‘hello‘, function() {
 2 
 3     return {
 4 
 5         restrict: ‘E‘,
 6 
 7         template: ‘<h1>Hello world</h1>‘,
 8 
 9         replace: true
10 
11     };
12 
13 });
14 
15 myApp.directive("ngHover", function() {
16 
17     return function(scope, element, attrs) {
18 
19         element.bind("mouseenter", function() {
20 
21             element.css("background", "yellow");
22 
23         });
24 
25         element.bind("mouseleave", function() {
26 
27             element.css("background", "none");
28 
29         });
30 
31     }
32 
33 });

第215天：Angular---指令