大家好酗钞，我是IT修真院武漢分院第10期學(xué)員余佳貝别凤，一枚正直善良的web程序員。
今天給大家分享一下啸臀，修真院官網(wǎng)js任務(wù)8，深度思考中的知識(shí)點(diǎn)——angular js常用指令
1.背景介紹
指令是angular的一個(gè)特色烁落，是對(duì)HTML的拓展乘粒，angular中指令有很多，你甚至可以自定義指令伤塌， 可以說(shuō)是一個(gè)非常強(qiáng)大的功能灯萍。今天，先從幾個(gè)最常用的指令著手每聪，學(xué)習(xí)angular的指令旦棉。
2.知識(shí)剖析
ng-if、ng-class药薯、ng-option绑洛、ng-value、ng-click是如何使用的童本？? ? ?
?（1）真屯、ng-if：ng-if 指令其實(shí)就是控制DOM的存在與不存在。當(dāng)為true的時(shí)候穷娱，添加HTML元素绑蔫，false的時(shí)候刪除HTML元素运沦，其與ng-hide、ng-show等的區(qū)別是ng-if:false;會(huì)將DOM刪除
（2）配深、ng-class：ng-class 指令用于給 HTML 元素動(dòng)態(tài)綁定一個(gè)或多個(gè) CSS 類茶袒。ng-class 指令的值可以是字符串，對(duì)象凉馆，或一個(gè)數(shù)組薪寓。如果是字符串，多個(gè)類名使用空格分隔澜共。如果是對(duì)象向叉，需要使用 key-value 對(duì)，key 為你想要添加的類名嗦董，value 是一個(gè)布爾值母谎。只有在 value 為 true 時(shí)類才會(huì)被添加。如果是數(shù)組京革，可以由字符串或?qū)ο蠼M合組成奇唤，數(shù)組的元素可以是字符串或?qū)ο蟆?/p>
（3）、ng-option：ng-options 指令用于使用填充元素的選項(xiàng)匹摇。
ng-options屬性可以在表達(dá)式中 使用數(shù)組或?qū)ο髞?lái)自動(dòng)生成一個(gè)select中的option列表咬扇。ng-options與ng-repeat很相似，很多時(shí)候可以用ng-repeat來(lái)代替ng-options廊勃。但是ng-options提供了一些好處懈贺，例如減少內(nèi)存提高速度，以及提供選擇框的選項(xiàng)來(lái)讓用戶選擇坡垫。
（4）梭灿、ng-value：
ng-value 指令用于設(shè)置 input 或 select 元素的 value 屬性。
和value相比冰悠，它的值可以是表達(dá)式堡妒，所以相比之下可以實(shí)現(xiàn)更多需求。比如當(dāng)需要使用ng-repeat來(lái)動(dòng)態(tài)生成input[]的時(shí)候溉卓，ngValue是很有用處的皮迟。
（5）、ng-click：
ng-click 指令告訴了 AngularJS HTML 元素被點(diǎn)擊后需要執(zhí)行的操作的诵。如果是使用ng-click來(lái)實(shí)現(xiàn)函數(shù)的執(zhí)行的話万栅，還可以進(jìn)行傳參佑钾。一個(gè)ng-click可以觸發(fā)多個(gè)操作西疤，先執(zhí)行function1后執(zhí)行function2
3.常見(jiàn)問(wèn)題
ng-click等angular事件和click等原生事件的區(qū)別是什么？
4.解決方案
1休溶、原生事件和angular事件的區(qū)別
這里ng-click和onclick的最主要的區(qū)別是： ng-click的作用域是其所在的ng-controller所聲明的作用域代赁，而onclick的作用域是全局的扰她。
通過(guò)一行代碼即可解決問(wèn)題，直接見(jiàn)demo
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
ng-if的作用域問(wèn)題
ng-if指令會(huì)創(chuàng)建一個(gè)子級(jí)作用域芭碍，因此徒役，如果在ng-if指令中添加了元素， 并向元素屬性增加 ng-model指令窖壕，那么ng-model指令對(duì)應(yīng)的作用域?qū)傩?子級(jí)作用域忧勿，而并非控制器注入的$scope作用域?qū)ο螅@點(diǎn)在進(jìn)行雙向數(shù) 據(jù)綁定時(shí)瞻讽，需要引起注意鸳吸。
因此，解決ng-if中ng-model值無(wú)效的問(wèn)題速勇，主要方法就是在綁定值時(shí)添加$parent標(biāo)識(shí)晌砾， 或者用ng-show指令代替ng-if指令，這兩種方法都可以達(dá)到同樣的頁(yè)面效果烦磁。
寫(xiě)法如下：
ng-model="$parent.industry"
7.參考文獻(xiàn)
參考一：菜鳥(niǎo)教程
參考二：[Angularjs]ng-select和ng-options
8.更多討論
1.用angularJS的ng-model綁定到select上养匈，會(huì)自動(dòng)增加一個(gè)value為空的option,這是為什么？
原因：ng-model沒(méi)有初始化導(dǎo)致的都伪， 如果ng-model所綁定的變量的值在ng-options綁定的value里面有呕乎， 下拉選框中就不會(huì)有空白的一項(xiàng)澎嚣，選中別的數(shù)據(jù)項(xiàng)以后消失钉蒲； 如果ng-model所綁定的變量的值不在ng-options綁定的value里面， 下拉選框中就不會(huì)有空白一項(xiàng),并且只有當(dāng)ng-options綁定的value里有對(duì)應(yīng) 的text為空行時(shí)帆锋，這個(gè)空行才會(huì)一直存在于下拉選項(xiàng)里珍逸。
解決：將select中的一個(gè)option設(shè)置為空逐虚，就可以防止因添加ng-model自動(dòng)添加空option的問(wèn)題
2.在實(shí)際應(yīng)用的時(shí)候，ng-if和ng-show可以相互替換使用嗎谆膳？
回答：這個(gè)要根據(jù)具體情況分析叭爱，一般情況下是沒(méi)問(wèn)題的，但是當(dāng)需要對(duì)不可見(jiàn)的元素進(jìn)行其他操作時(shí)漱病，就最好是放棄ng-if了
3.ng-if中的ng-model值無(wú)效
解決ng-if中ng-model值無(wú)效的問(wèn)題买雾，主要方法就是在綁定值時(shí)添加$parent標(biāo)識(shí)，或者用ng-show指令代替ng-if指令杨帽，這兩種方法都可以達(dá)到同樣的頁(yè)面效果漓穿。
