大家好，我是IT修真院武漢分院第10期學(xué)員余佳貝，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網(wǎng)js任務(wù)8，深度思考中的知識(shí)點(diǎn)——angular js常用指令
1.背景介紹
指令是angular的一個(gè)特色，是對(duì)HTML的拓展，angular中指令有很多，你甚至可以自定義指令， 可以說是一個(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ū)ο髞碜詣?dòng)生成一個(gè)select中的option列表。ng-options與ng-repeat很相似，很多時(shí)候可以用ng-repeat來代替ng-options。但是ng-options提供了一些好處，例如減少內(nèi)存提高速度，以及提供選擇框的選項(xiàng)來讓用戶選擇。
（4）、ng-value：
ng-value 指令用于設(shè)置 input 或 select 元素的 value 屬性。
和value相比，它的值可以是表達(dá)式，所以相比之下可以實(shí)現(xiàn)更多需求。比如當(dāng)需要使用ng-repeat來動(dòng)態(tài)生成input[]的時(shí)候，ngValue是很有用處的。
（5）、ng-click：
ng-click 指令告訴了 AngularJS HTML 元素被點(diǎn)擊后需要執(zhí)行的操作。如果是使用ng-click來實(shí)現(xiàn)函數(shù)的執(zhí)行的話，還可以進(jìn)行傳參。一個(gè)ng-click可以觸發(fā)多個(gè)操作，先執(zhí)行function1后執(zhí)行function2
3.常見問題
ng-click等angular事件和click等原生事件的區(qū)別是什么？
4.解決方案
1、原生事件和angular事件的區(qū)別
這里ng-click和onclick的最主要的區(qū)別是： ng-click的作用域是其所在的ng-controller所聲明的作用域，而onclick的作用域是全局的。
通過一行代碼即可解決問題，直接見demo
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
ng-if的作用域問題
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值無效的問題，主要方法就是在綁定值時(shí)添加$parent標(biāo)識(shí)， 或者用ng-show指令代替ng-if指令，這兩種方法都可以達(dá)到同樣的頁面效果。
寫法如下：
ng-model="$parent.industry"
7.參考文獻(xiàn)
參考一：菜鳥教程
參考二：[Angularjs]ng-select和ng-options
8.更多討論
1.用angularJS的ng-model綁定到select上，會(huì)自動(dòng)增加一個(gè)value為空的option,這是為什么？
原因：ng-model沒有初始化導(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的問題
2.在實(shí)際應(yīng)用的時(shí)候，ng-if和ng-show可以相互替換使用嗎？
回答：這個(gè)要根據(jù)具體情況分析，一般情況下是沒問題的，但是當(dāng)需要對(duì)不可見的元素進(jìn)行其他操作時(shí)，就最好是放棄ng-if了
3.ng-if中的ng-model值無效
解決ng-if中ng-model值無效的問題，主要方法就是在綁定值時(shí)添加$parent標(biāo)識(shí)，或者用ng-show指令代替ng-if指令，這兩種方法都可以達(dá)到同樣的頁面效果。
