前言

最近在做一個(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è)屬性賦值如：

$scope.showpage = 'abut'

但是如果直接賦值一個(gè)對(duì)象，對(duì)不起，需要先聲明，再給對(duì)象添加屬性

$scope.data = {};
$scope.data.showpage = 'about';

ng-swith

使用方式比前前兩個(gè)復(fù)雜一點(diǎn)，不過也非常直觀，類似原生js 中的switch 函數(shù)：

在外層父級(jí)元素設(shè)置 ng-switch 為一個(gè)表達(dá)式A ，那么他的子元素相當(dāng)于幾個(gè)不同的選項(xiàng)，表達(dá)式A 對(duì)應(yīng)哪個(gè)子元素的 ng-switch-with 值，就顯示那部分。

<div ng-switch='showpart'>
 <div ng-switch-default></div>
 <div ng-switch-with='home'></div>
 <div ng-switch-with='blog'></div>
 <div ng-switch-with='about'></div>
 <div ng-switch-with='contact'></div>
</div>

這也是一個(gè)能幫我們節(jié)省效率的指令。和ng-if 一樣，一開始如果不等于父級(jí)的 ng-switch 表達(dá)式的值，則不會(huì)在頁面渲染的，而且我們也可以通過 ng-switch-default 來設(shè)置默認(rèn)的顯示部分。比如以往常見的 Tab 選項(xiàng)卡，用這個(gè)指令實(shí)現(xiàn)起來就非常的容易。

這里有一點(diǎn)疑問，因?yàn)槲以陧?xiàng)目中，做的單頁面應(yīng)用，所有不同部分都在一個(gè)頁面里面。那么我經(jīng)常需要根據(jù)不同的ajax返回值，顯示不同的部分，（特殊原因不能使用路由），所以我這里就是用的 ng-switch 指令，根據(jù)不同返回值，顯示不同部分。雖然也能實(shí)現(xiàn)按需顯示，但看到有文章說這樣使用 ng-switch 并不是很妥當(dāng)，路過的朋友，有了解的可以指點(diǎn)我一下！我在這先謝過了~~

后面我會(huì)繼續(xù)分享Angular在項(xiàng)目開發(fā)中的經(jīng)驗(yàn)，以及遇到的坑！

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者使用Angular.js能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論