1.背景介紹
指令是一個Dom元素上的標簽(和元素上的屬性, CSS類樣式一樣，屬于這個Dom元素)它告訴AngualrJS的HTML編譯器，去附加一個行為到這個Dom元素上去，這個行為可以改變這個Dom元素，或者這個Dom元素的子元素。
AngularJS通過被稱為指令的新屬性來擴展HTML。AngularJS通過內置的指令來為應用添加功能。AngularJS內置指令是擴展的HTML屬性，帶有前綴ng-。
2.知識剖析
ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
一、ng-if：
ng-if指令用于在表達式為false時移除HTML元素。如果ng-if語句執行的結果為true，會添加HTML元素，并顯示。
ng-if指令不同于ng-hide/ng-show，ng-hide/ng-show是隱藏元素,設置元素的display為none。而ng-if是從DOM中移除元素。
ng-hide指令在表達式為true時隱藏指定的HTML元素。ng-show指令在表達式為true時顯示指定的HTML元素。
二、ng-class：
ng-class指令用于給HTML元素動態綁定一個或多個CSS類。ng-class指令的值可以是字符串，對象，或一個數組。如果是字符串，多個類名使用空格分隔。
如果是對象，需要使用key-value對，key為你想要添加的類名，value是一個布爾值。只有在value為true時類才會被添加。
如果是數組，可以由字符串或對象組合組成，數組的元素可以是字符串或對象。
三、ng-option：
ng-options指令用于使用填充元素的選項。
ng-options屬性可以在表達式中使用數組或對象來自動生成一個select中的option列表。ng-options與ng-repeat很相似，很多時候可以用ng-repeat來代替ng-options。但是ng-options提供了一些好處，例如減少內存提高速度，以及提供選擇框的選項來讓用戶選擇。
四、ng-value：
ng-value指令用于設置input或select元素的value屬性。
和value相比，它的值可以是表達式，所以相比之下可以實現更多需求。比如當需要使用ng-repeat來動態生成input[]的時候，ngValue是很有用處的。
五、ng-click：
ng-click指令告訴了AngularJS HTML元素被點擊后需要執行的操作。如果是使用ng-click來實現函數的執行的話，還可以進行傳參。一個ng-click可以觸發多個操作，先執行function1后執行function2
3.常見問題
一、ng-option表達式的寫法
二、ng-class-odd和ng-class-even如何使用
4.解決方案
一、ng-option表達式的寫法
ng-options的值可以是一個內涵表達式（comprehension expression），其實這只是一種有趣的說法，簡單來說就是它可以接收一個數組或者對象，并對它們進行循環，將內部的內容提供給select標簽內部的選項。它可以是一下兩種形式。
1、數組作為數據源
用數組中的值做標簽。(label for value in array)
用數組中的值作為選中的標簽。(select as label for value in array)
用數組中的值做標簽組。(label group by group for value in array)
用數組中的值作為選中的標簽組。(select as label group by group for value in array track by trackexpr)
2、對象作為數據源
用對象的鍵-值（key-value）做標簽。(label for (key , value) in object)
用對象的鍵-值作為選中的標簽。(select as label for (key , value) in object)
用對象的鍵-值作為標簽組。(label group by group for (key, value) in object)
用對象的鍵-值作為選中的標簽組。(select as label group by group for (key, value) in ob)
二、ng-class-odd和ng-class-even如何使用
ng-class-odd指令用于為HTML元素動態的綁定一個或多個CSS類，但只作用于奇數行。
ng-class-even指令用于為HTML元素動態的綁定一個或多個CSS類，但只作用于偶數行。
需要與ng-repeat指令搭配使用。建議用在表格的樣式渲染中，但是所有HTML元素都是支持的。
5.編碼實戰
Demo：見PPT
6.擴展思考
ng-if的作用域問題：
ng-if指令會創建一個子級作用域，因此，如果在ng-if指令中添加了元素，并向元素屬性增加ng-model指令，那么ng-model指令對應的作用域屬性子級作用域，而并非控制器注入的$scope作用域對象，這點在進行雙向數據綁定時，需要引起注意。因此，解決ng-if中ng-model值無效的問題，主要方法就是在綁定值時添加$parent標識，或者用ng-show指令代替ng-if指令，這兩種方法都可以達到同樣的頁面效果。
寫法如下：ng-model="$parent.industry"
7.參考文獻
參考一：菜鳥教程http://www.runoob.com/angularjs/angularjs-reference.html
參考二：[Angularjs]ng-select和ng-optionshttp://www.cnblogs.com/wolf-sun/p/4614532.html
8.更多討論
用angularJS的ng-model綁定到select上，會自動增加一個value為空的option,這是為什么？
原因：如果ng-model所綁定的變量的值在ng-options綁定的value里面有，下拉選框中就不會有空白的一項，選中別的數據項以后消失；如果ng-model所綁定的變量的值不在ng-options綁定的value里面，下拉選框中就不會有空白一項,并且只有當ng-options綁定的value里有對應的text為空行時，這個空行才會一直存在于下拉選項里。
解決辦法
方法一：將select中的一個option設置為空，就可以防止因添加ng-model自動添加空option的問題
方法二：自己預先添加一個value為空的option，再用ng-if="false"把它去掉
問題：1、ng-click可以在哪些元素上使用
? ? ? ? ? ?2、ng-if和ng-show的適用場景。
PPT地址：https://ptteng.github.io/PPT/PPT/js-08-AngularJs%20common%20directive.html#/
視頻地址：https://v.qq.com/x/page/w05083whpu3.html
今天的分享就到這里啦，歡迎大家點贊、轉發、留言、拍磚~
下期預告：angular js常用指令ng-blur、ng-change、ng-focus、ng-disabled是如何運用到表單驗證中的？不見不散~
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧~
我的邀請碼：96194340，或者你可以直接點擊此鏈接：http://www.jnshu.com/login/1/96194340
