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

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

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

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

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

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

所以如果你用指令、模板來渲染額外的信息，例如通過點擊來顯示列表項的詳細信息，一定要使用  ng-if（AngularJSv. 1.1.5以后）。它可阻止渲染（與ng-show相比）。

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

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

最新評論