前言

最近在做一個(gè)項(xiàng)目改版，第一次在項(xiàng)目中真正使用Angular,和平時(shí)自己寫寫小demo,做做練習(xí)的感覺還是非常不同的，感覺非常的新鮮。有幾個(gè)指令是經(jīng)常用到的，這里由于這幾個(gè)有點(diǎn)共性，所以一起介紹一下ng-if,ng-show/ng-hide,ng-switch 這幾個(gè)指令。下面來看看詳細(xì)的介紹：

共性

       1.這里個(gè)指令都是Angular框架提供給我們的設(shè)置頁面內(nèi)容顯示和隱藏的方法，使用起來非常方便，尤其是做業(yè)務(wù)邏輯。

       2.都是通過一個(gè)表達(dá)式的值來實(shí)現(xiàn)切換顯示的，只不過 ng-switch 可以是其他值，ng-if ng-show 就必須是 boolen了。

       3.我在使用過程中發(fā)現(xiàn)一個(gè)小技巧，我們通過表達(dá)式設(shè)置 ng-if 或者 ng-show 直接在頁面中定義一個(gè)表達(dá)式，這個(gè)時(shí)候它的值其實(shí)是undefined，由于 ！== true 所以這部分默認(rèn)也是隱藏。

那么既然是不同指令，就各自有專攻，那我們就來看看他們分別都有什么果實(shí)能力。。。(不看海賊的可以無視哈~~)

ng-show/ng-hide

在用原生js 或者 jquery的時(shí)候，我們一般都可以定義一個(gè)類，通過添加和刪除這個(gè)類來實(shí)現(xiàn)元素的顯示和隱藏切換。其實(shí)這部分從網(wǎng)上參考資料來看，Angular也是這樣實(shí)現(xiàn)的，根據(jù)表達(dá)式正確與否，動(dòng)態(tài)添加或者刪除 ng-hide 這個(gè)Angualr預(yù)先定義好的class。調(diào)用方式具體如下：

可以是設(shè)置一個(gè)變量

<div ng-show='show'></div>

也可以是直接使用 true / false

<div ng-show='true'></div>

對(duì)于變量，我們?cè)趈s 中直接設(shè)置這個(gè)值就可以。

這個(gè)指令的特性是，即使我們暫時(shí)隱藏這部分內(nèi)容，它也會(huì)被dom 渲染。

ng-if

使用方式也是設(shè)置一個(gè)表達(dá)式：

可以是設(shè)置一個(gè)變量

<div ng-if='more'></div>

也可以是直接使用 true / false

<div ng-if='true'></div>

對(duì)于變量，我們?cè)趈s 中直接設(shè)置這個(gè)值就可以。

這是一個(gè)能幫我們節(jié)省效率的指令，如果表達(dá)式值 === false , 則這部分不會(huì)在dom中渲染，或者原有的內(nèi)容會(huì)被從dom中刪除。所以如果有一部分內(nèi)容，不需要一開始就顯示，我們可以先用ng-if 讓它隱藏。例如一個(gè)顯示更多的下拉按鈕，剛開始不顯示的部分，可以ng-if 來設(shè)置，等我們點(diǎn)擊了更多按鈕，再設(shè)置ng-if = true 既可。這樣子減少了頁面渲染事件，提高了效率呢。

還有一個(gè)特性，ng-if 或創(chuàng)建自己的 scope，它通過原型繼承父級(jí)的scope。一個(gè)典型的例子來自于參考資源1。

還有一個(gè)小坑，$scope上面我可以直接給一個(gè)屬性賦值如：