大家好，我是IT修真院上海分院1期的Web學(xué)員劉洪利狞膘，今天給大家分享一下關(guān)于angular中的常見指令ng-if揩懒、ng-class、ng-options挽封、ng-value已球、ng-click的使用方法
1.背景介紹
指令是一個Dom元素上的標(biāo)簽(和元素上的屬性, CSS 類樣式一樣，屬于這個Dom元素)辅愿， 它告訴AngualrJS的 HTML 編譯器智亮，去附加一個行為到這個Dom元素上去，這個行為可以改變這個Dom元素点待，或者這個Dom元素的子元素阔蛉。
AngularJS 通過被稱為 指令 的新屬性來擴(kuò)展 HTML。
AngularJS 通過內(nèi)置的指令來為應(yīng)用添加功能癞埠。AngularJS 內(nèi)置指令是擴(kuò)展的 HTML 屬性状原，帶有前綴 ng-。
2.知識剖析
ng-if苗踪、ng-class颠区、ng-option、ng-value通铲、ng-click是如何使用的瓦呼？
NG-IF:?
ng-if指令可以根據(jù)表達(dá)式的值在DOM中生成或移除一個元素。如果賦值給ng-if的表達(dá)式的值是false，那對應(yīng)的元素將會從DOM中移除央串，否則生成一個新的元素插入DOM中磨澡。ng-if同no-show和ng-hide指令最本質(zhì)的區(qū)別是，它不是通過CSS顯示或隱藏DOM節(jié)點(diǎn)质和，而是刪除或者新增結(jié)點(diǎn)
NG-CLASS：
ng-class 指令用于給 HTML 元素動態(tài)綁定一個或多個 CSS 類稳摄。
ng-class 指令的值可以是字符串，對象饲宿，或一個數(shù)組厦酬。
如果是字符串，多個類名使用空格分隔瘫想。
如果是對象仗阅，需要使用 key-value 對，key 為你想要添加的類名国夜，value 是一個布爾值减噪。只有在 value 為 true 時類才會被添加。
如果是數(shù)組车吹，可以由字符串或?qū)ο蠼M合組成筹裕，數(shù)組的元素可以是字符串或?qū)ο蟆?/p>
NG-OPTIONS:
ng-options 指令用于使用<option>填充 <select>元素的選項(xiàng)。
ng-options屬性可以在表達(dá)式中使用數(shù)組或?qū)ο髞碜詣由梢粋€select中的option列表窄驹。ng-options與ng-repeat很相似朝卒，很多時候可以用ng-repeat來代替ng-options。但是ng-options提供了一些好處乐埠，例如減少內(nèi)存提高速度抗斤，以及提供選擇框的選項(xiàng)來讓用戶選擇。
NG-VALUE：
ng-value 指令用于設(shè)置 input 或 select 元素的 value 屬性丈咐。
和value相比瑞眼，它的值可以是表達(dá)式，所以相比之下可以實(shí)現(xiàn)更多需求扯罐。
比如當(dāng)需要使用ng-repeat來動態(tài)生成input[]的時候负拟，ngValue是很有用處的烦衣。
NG-CLICK：
ng-click 指令告訴了 AngularJS HTML 元素被點(diǎn)擊后需要執(zhí)行的操作歹河。
如果是使用ng-click來實(shí)現(xiàn)函數(shù)的執(zhí)行的話，還可以進(jìn)行傳參花吟。
一個ng-click可以觸發(fā)多個操作秸歧，
如<button ng-click="function1();function2()"></button>
先執(zhí)行function1后執(zhí)行function2
3.常見問題
1、ng-option表達(dá)式的寫法
4.解決方案
ng-option表達(dá)式的寫法
ng-options的值可以是一個內(nèi)涵表達(dá)式（comprehension expression）衅澈， 其實(shí)這只是一種有趣的說法键菱，簡單來說就是它可以接收一個數(shù)組或者對象， 并對它們進(jìn)行循環(huán)今布，將內(nèi)部的內(nèi)容提供給select標(biāo)簽內(nèi)部的選項(xiàng)经备。它可以是一下兩種形式
4.1.數(shù)組作為數(shù)據(jù)源
用數(shù)組中的值做標(biāo)簽拭抬。
用數(shù)組中的值作為選中的標(biāo)簽。
用數(shù)組中的值做標(biāo)簽組侵蒙。
用數(shù)組中的值作為選中的標(biāo)簽組造虎。
4.2.對象作為數(shù)據(jù)源
用對象的鍵-值（key-value）做標(biāo)簽。
用對象的鍵-值作為選中的標(biāo)簽纷闺。
用對象的鍵-值作為標(biāo)簽組算凿。
用對象的鍵-值作為選中的標(biāo)簽組。
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
ng-if的作用域問題
ng-if指令會創(chuàng)建一個子級作用域犁功，因此氓轰，如果在ng-if指令中添加了元素，并向元素屬性增加ng-model指令浸卦，那么ng-model指令對應(yīng)的作用域?qū)儆谧蛹壸饔糜蚴鸺Γ⒎强刂破髯⑷氲?scope作用域?qū)ο螅@點(diǎn)在進(jìn)行雙向數(shù)據(jù)綁定時镐躲，需要引起注意储玫。
因此，解決ng-if中ng-model值無效的問題萤皂，主要方法就是在綁定值時添加$parent標(biāo)識撒穷， 或者用ng-show指令代替ng-if指令，這兩種方法都可以達(dá)到同樣的頁面效果裆熙。
寫法如下：
ng-model="$parent.industry"
7.參考文獻(xiàn)
參考一：菜鳥教程
參考二：AngularJS select中ngOptions用法詳解
參考三：(十四)ng-if與ng-show端礼、ng-hide指令的區(qū)別和注意事項(xiàng)
8.更多討論
8.1. 提問人-上海Web學(xué)員-姚磊：除了$parent以外，還有什么方法可以獲取作用域的值（以下回答基于此網(wǎng)址內(nèi)容---詳細(xì)談?wù)凙ngularJS的子級作用域問題）
回答人-上海Web學(xué)員-劉洪利：
????????我們可以仔細(xì)思考下$parent方法的一個原理入录，通過對ng-model綁定的變量添加$parent來使其對父級作用域產(chǎn)生影響蛤奥，改變子級作用域的同時來改變父級作用域。那么僚稿，我們可以思考凡桥，怎么實(shí)現(xiàn)改變子級作用域中變量的值可來影響父級作用域中變量的值
我對于這方面也是有些疑惑，于是求助萬能的度娘蚀同，大致找到了三種方法：
? ? ? ? 1. 通過添加$parent方法缅刽，這個沒什么好說的了，我們之前已經(jīng)通過demo演示過了
? ? ? ? 2.?通過給父級scope上添加{}來實(shí)現(xiàn)蠢络，把原始類型轉(zhuǎn)換成對象衰猛。?
? ? ? ? ? ? ? ? 這個就比較有意思了，var? vm=$scope.vm={};我們可以通過這樣一段代碼刹孔，將scope轉(zhuǎn)化為對象啡省，AngularJS的繼承是通過javascript的原型繼承方式實(shí)現(xiàn)的，進(jìn)行原型繼承即意味著父作用域在子作用域的原型鏈上。因?yàn)樵玩湹臋z索只會在屬性檢索的時候觸發(fā)卦睹，不會在改變屬性值的時候觸發(fā)畦戒。所以我們需要把原始類型轉(zhuǎn)換成對象，把值綁定在對象的屬性上结序。
? ? ? ? ? ? ? ? 這時候我們就需要了解對象的屬性查找“當(dāng)查找一個對象的屬性時兢交，JavaScript 會向上遍歷原型鏈，直到找到給定名稱的屬性為止笼痹，到查找到達(dá)原型鏈的頂部（也就是 Object.prototype）配喳，如果仍然沒有找到指定的屬性，就會返回 undefined凳干∏绻”。
? ? ? ? ? ? ? ? 當(dāng)我們通過ng-if創(chuàng)建子級作用域的時候救赐，同樣會新建一個vm.value對象屬性涧团，在創(chuàng)建的同時，會把scope對象屬性的地址同樣的賦給子級作用域創(chuàng)建的vm.value经磅。同樣的泌绣，ng-model會通過雙向綁定的vm.value檢索，通過地址檢索到父級作用域中的scope對象预厌，然后對scope對象的屬性值進(jìn)行修改
? ? ? ? 3.通過controller? ?as來實(shí)現(xiàn)
? ??????????????controller as其實(shí)相當(dāng)于controller的示例對象阿迈，原理還是把原始類型轉(zhuǎn)換成對象類型。
8.2. 提問人-上海Web學(xué)員-王夢男：AngularJs和jQuery最大的區(qū)別是什么（以下回答基于此網(wǎng)站---AngularJS指令參數(shù)詳解）
回答人-上海Web學(xué)員-劉洪利：
????????????兩者的區(qū)別表現(xiàn)在數(shù)據(jù)雙向綁定轧叽，實(shí)質(zhì)就是DOM的操作形式不一樣苗沧。
? ? ? ? ? ? jQuery通過選擇器找到DOM元素，再賦予元素的行為炭晒；
????????????而AngularJS則是待逞，將指令與DOM綁定在一起，再擴(kuò)展指令的行為网严。
8.3. 提問人-上海Web學(xué)員-楊濤：ng-value和ng-bind有什么區(qū)別（以下回答基于此網(wǎng)站---ng-model识樱，ng-value，ng-bind震束，{{}}----angularJS數(shù)據(jù)綁定）
回答人-上海Web學(xué)員-劉洪利：
????????????ng-value用于設(shè)置 input 或 select 元素的 value 屬性
? ? ? ? ? ? <input ng-value="expression">
? ??????????ng-bind指令告訴 AngularJS 使用給定的變量或表達(dá)式的值來替換 HTML 元素的內(nèi)容怜庸。如果給定的變量或表達(dá)式修改了，指定替換的 HTML 元素也會修改驴一。所有的 HTML 元素都支持該指令叁征。
? ? ? ? ? ? ? ? <element ng-bind="expression"> </element>
? ??????????????或作為 CSS 類：
????????????????<element class="ng-bind:expression"></element>
鳴謝
感謝大家觀看
分享人:劉洪利
IT修真院上海Web第1期學(xué)員劉洪利: 邀請碼14898047
