AngularJS快速入門4--内置指令

AngularJS的指令：

擴充了HTML的基本功能，通過額外的标簽、屬性來增強HTML功能，Angular的指令在頁面中展現出來就是一個标簽\屬性\class名稱\注釋等。
           

控制指令：

1.ng-app,用于指定AngularJS應用啟動的入口和挂載應用的根子產品，它自動引導Angular程式的運作，在定義應用程式運作入口的同時，可以綁定一個DOM元素， DOM元素的開始标簽和結束标簽之間~就可以認為是子產品的作用範圍。
那麼問題就來了，ng-app沒有子產品，可以引導Angular運作嗎？答案是可以， Angular會将頁面中出現的支援的文法進行解釋運作，但是不能使用子產品控制器中定義的/挂載的資料，會超出作用範圍！

2.ng-controller,用于指定AngularJS子產品上的控制器和對應的DOM元素的綁定。子產品中，可以給子產品挂載一個或者多個控制器，挂載好的控制器在目前子產品範圍内，可以通過ng-controller指令來指定控制器的作用範圍。
           

渲染指令： 指令的作用就是将資料，渲染展示到頁面上【底層是封裝了DOM操作】

1.ng-repeat:用于循環輸出指定的資料。屬性直接寫在要循環的标簽上， u in users中u和users就會被Angular解釋成變量，擷取變量中的值進行處理。
           

<li ng-repeat="u in users">
           

2.ng-bind:用于展示綁定的變量中的資料。
           

<div ng-bind="content"></div>
    <div ng-bind="12 * 12"></div>
    <div ng-bind="true && false"></div>
    <div ng-bind="12 > 10"></div>
           

3.ng-bind-html:以浏覽器可以解釋的方式進行資料的展示。這個指令，類似于原生JS的innerHTML，使用的時候一定要慎重，對于它修飾的内容，必須確定安全性。如果内容的來源不确定，不要使用編譯html标簽的屬性或者函數，否則容易被XSS攻擊。

4.ng-include:頁面包含，可以通過該指令将指定的另一個頁面包含到目前頁面中。它類似于JQuery 中的load()函數，用于加載其他頁面。
           

<div ng-include="'tab1.html'"></div>     注：帶入的頁面不僅要被雙引号包裹，也要單引号。
           

節點指令：主要用于标簽、樣式、屬性、内容的操作。

1.ng-class:用于通過雙向綁定的資料變量來動态控制DOM元素的Class樣式。
2. ng-class-even/odd:用于和ng-repeat結合使用時，控制偶數行和奇數行不同的樣式處理，添加不同的樣式進行隔行樣式分離。
3. ng-style:用于直接給Html标簽添加行内樣式的處理，樣式按照css标準文法添加。
4. ng-src:用于将圖檔路徑動态渲染到img标簽中。
5. ng-href:用于将超連結路徑動态渲染到a标簽中。
6. ng-if:選擇指令，用于根據指定條件進行DOM元素的移除或者重繪到DOM結構的操作。
7. ng-show:顯示指令，用于當條件為true時将指定的元素顯示繪制到網頁中。
8. ng-hide:隐藏指令，用于當條件為true時将指定的元素在頁面上隐藏display:none。
9. ng-switch:多條件選擇指令，配合子指令ng-switch-when和ng-switch-default一起使用，來進行多條件下的選擇輸出。
           

*事件指令：*Angular封裝的用于操作事件的指令

1. ng-click:用于捕捉使用者滑鼠單擊操作，執行指定的事件處理函數。
 2. ng-dbclick:滑鼠輕按兩下。
 3. ng-keydown:鍵盤按鍵按下。
 4. ng-keyup:鍵盤按鍵擡起。
 5. ng-mousedown:滑鼠左鍵按下。
 6. ng-mouseup:滑鼠左鍵擡起。
           

注意：事件處理的過程中，可以通過

$event

将事件對象傳遞給處理函數，通過事件對對象可以進行阻止事件冒泡、阻止浏覽器預設行為、擷取滑鼠位置等等各種原生操作。