在Angular的原生指令中有這幾個(gè)指令用來(lái)控制元素的展示與否，ng-show/ng-hide/ng-if和ng-switch。

在angular性能優(yōu)化中，我們也常常會(huì)用到它。

我們看下他們的區(qū)別。

其中ng-show和ng-hide是一樣的，只不過(guò)ng-show是滿足條件就展示，ng-hide是滿足條件就隱藏，下面就不再提到ng-hide。

ng-show
ng-show接收的一個(gè)bool值，當(dāng)為true的時(shí)候就會(huì)被觸發(fā)去展示DOM節(jié)點(diǎn)。當(dāng)ng-show的值為false的時(shí)候，在DOM節(jié)點(diǎn)上添加了一個(gè)ng-hide的一個(gè)類，這個(gè)類的表達(dá)式就是“display：none”。DOM load的時(shí)候ng-show里面的所有節(jié)點(diǎn)都會(huì)被加載。也就是說(shuō)，ng-show僅僅是影藏和顯示了DOM節(jié)點(diǎn)。也就意味如果油太多的ng-show指令，即使他們不顯示，但他們所在的DOM節(jié)點(diǎn)還是會(huì)被渲染的。

ng-if
ng-if也接收的一個(gè)bool值，當(dāng)它的值為false的時(shí)候，它所控制的節(jié)點(diǎn)并沒(méi)有被創(chuàng)建或者說(shuō)之前的DOM節(jié)點(diǎn)會(huì)被銷毀掉，哪怕這個(gè)節(jié)點(diǎn)里面包含了很多ng的綁定都不會(huì)去執(zhí)行。所以，我們?cè)陧?xiàng)目開(kāi)發(fā)中，如果沒(méi)有必要一次性加載完的dom就可以用ng-if來(lái)阻止ng事件發(fā)生，從而也就加快了dom的加載速度。特別是在repeat的時(shí)候，每條數(shù)據(jù)又包含了復(fù)雜的數(shù)據(jù)結(jié)構(gòu)的時(shí)候效果特別明顯。當(dāng)它的值為true的時(shí)候，就會(huì)去創(chuàng)建DOM節(jié)點(diǎn)。

所以如果你用指令、模板來(lái)渲染額外的信息，例如通過(guò)點(diǎn)擊來(lái)顯示列表項(xiàng)的詳細(xì)信息，一定要使用  ng-if（AngularJSv. 1.1.5以后）。它可阻止渲染（與ng-show相比）。

ng-switch
ng-switch的存在，讓我們省去很多麻煩（應(yīng)該說(shuō)angular本身就這樣）。比如我們之前用傳統(tǒng)的方式去做一個(gè)tab選項(xiàng)卡。我們要一次次的循環(huán)然后在判斷當(dāng)前的狀態(tài)最后再去執(zhí)行相應(yīng)的事情。在angular里面用ng-switch就非常的簡(jiǎn)單。ng-switch要先監(jiān)聽(tīng)某一個(gè)變量，當(dāng)此變量為什么值的時(shí)候下面就顯示什么內(nèi)容。如上面顯示的，監(jiān)聽(tīng)了type這么一個(gè)變量，當(dāng)type的值等于‘a(chǎn)aa'的時(shí)候這塊區(qū)域就會(huì)被創(chuàng)建并顯示；當(dāng)type的值等于‘bbb'的時(shí)候，之前'aaa'的dom全部會(huì)被銷毀，然后'bbb'dom全部創(chuàng)建并顯示。

例子 http://jsbin.com/hinehi/1/edit

最新評(píng)論