1.背景介紹
指令是一個Dom元素上的標簽(和元素上的屬性, CSS類樣式一樣，屬于這個Dom元素)它告訴AngualrJS的HTML編譯器，去附加一個行為到這個Dom元素上去，這個行為可以改變這個Dom元素，或者這個Dom元素的子元素。
AngularJS通過被稱為指令的新屬性來擴展HTML。AngularJS通過內(nèi)置的指令來為應(yīng)用添加功能。AngularJS內(nèi)置指令是擴展的HTML屬性，帶有前綴ng-。
2.知識剖析
ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
一、ng-if：
ng-if指令用于在表達式為false時移除HTML元素。如果ng-if語句執(zhí)行的結(jié)果為true，會添加HTML元素，并顯示。
ng-if指令不同于ng-hide/ng-show，ng-hide/ng-show是隱藏元素,設(shè)置元素的display為none。而ng-if是從DOM中移除元素。
ng-hide指令在表達式為true時隱藏指定的HTML元素。ng-show指令在表達式為true時顯示指定的HTML元素。
二、ng-class：
ng-class指令用于給HTML元素動態(tài)綁定一個或多個CSS類。ng-class指令的值可以是字符串，對象，或一個數(shù)組。如果是字符串，多個類名使用空格分隔。
如果是對象，需要使用key-value對，key為你想要添加的類名，value是一個布爾值。只有在value為true時類才會被添加。
如果是數(shù)組，可以由字符串或?qū)ο蠼M合組成，數(shù)組的元素可以是字符串或?qū)ο蟆?/p>
三、ng-option：
ng-options指令用于使用填充元素的選項。
ng-options屬性可以在表達式中使用數(shù)組或?qū)ο髞碜詣由梢粋€select中的option列表。ng-options與ng-repeat很相似，很多時候可以用ng-repeat來代替ng-options。但是ng-options提供了一些好處，例如減少內(nèi)存提高速度，以及提供選擇框的選項來讓用戶選擇。
四、ng-value：
ng-value指令用于設(shè)置input或select元素的value屬性。
和value相比，它的值可以是表達式，所以相比之下可以實現(xiàn)更多需求。比如當需要使用ng-repeat來動態(tài)生成input[]的時候，ngValue是很有用處的。
五、ng-click：
ng-click指令告訴了AngularJS HTML元素被點擊后需要執(zhí)行的操作。如果是使用ng-click來實現(xiàn)函數(shù)的執(zhí)行的話，還可以進行傳參。一個ng-click可以觸發(fā)多個操作，先執(zhí)行function1后執(zhí)行function2
3.常見問題
一、ng-option表達式的寫法
二、ng-class-odd和ng-class-even如何使用
4.解決方案
一、ng-option表達式的寫法
ng-options的值可以是一個內(nèi)涵表達式（comprehension expression），其實這只是一種有趣的說法，簡單來說就是它可以接收一個數(shù)組或者對象，并對它們進行循環(huán)，將內(nèi)部的內(nèi)容提供給select標簽內(nèi)部的選項。它可以是一下兩種形式。
1、數(shù)組作為數(shù)據(jù)源
用數(shù)組中的值做標簽。(label for value in array)
用數(shù)組中的值作為選中的標簽。(select as label for value in array)
用數(shù)組中的值做標簽組。(label group by group for value in array)
用數(shù)組中的值作為選中的標簽組。(select as label group by group for value in array track by trackexpr)
2、對象作為數(shù)據(jù)源
用對象的鍵-值（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元素動態(tài)的綁定一個或多個CSS類，但只作用于奇數(shù)行。
ng-class-even指令用于為HTML元素動態(tài)的綁定一個或多個CSS類，但只作用于偶數(shù)行。
需要與ng-repeat指令搭配使用。建議用在表格的樣式渲染中，但是所有HTML元素都是支持的。
5.編碼實戰(zhàn)
Demo：見PPT
6.擴展思考
ng-if的作用域問題：
ng-if指令會創(chuàng)建一個子級作用域，因此，如果在ng-if指令中添加了元素，并向元素屬性增加ng-model指令，那么ng-model指令對應(yīng)的作用域?qū)傩宰蛹壸饔糜?，而并非控制器注入?scope作用域?qū)ο?，這點在進行雙向數(shù)據(jù)綁定時，需要引起注意。因此，解決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里面有，下拉選框中就不會有空白的一項，選中別的數(shù)據(jù)項以后消失；如果ng-model所綁定的變量的值不在ng-options綁定的value里面，下拉選框中就不會有空白一項,并且只有當ng-options綁定的value里有對應(yīng)的text為空行時，這個空行才會一直存在于下拉選項里。
解決辦法
方法一：將select中的一個option設(shè)置為空，就可以防止因添加ng-model自動添加空option的問題
方法二：自己預(yù)先添加一個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
今天的分享就到這里啦，歡迎大家點贊、轉(zhuǎn)發(fā)、留言、拍磚~
下期預(yù)告：angular js常用指令ng-blur、ng-change、ng-focus、ng-disabled是如何運用到表單驗證中的？不見不散~
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現(xiàn)在開始，找個師兄，帶你入門，掌控自己學習的節(jié)奏，學習的路上不再迷?！薄?/p>
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導?？靵砼c我一起學習吧~
我的邀請碼：96194340，或者你可以直接點擊此鏈接：http://www.jnshu.com/login/1/96194340
