AngularJS 指令之 ng-hide/ng-show

用途

ng-hide/ng-show屬性用來控制頁面內元素的顯示或隱藏。

ng-hide條件為true時，隱藏所在元素；false，則顯示所在元素。

ng-show正好相反。true時，顯示所在元素；false，則隱藏所在元素。

用法

<!-- when $scope.myValue is truthy (element is visible) -->
<div  class="ng-hide" ng-show="myValue"></div>

<!-- when $scope.myValue is truthy (element is hidden) -->
<div ng-hide="myValue"></div>

class="ng-hide" 可以不寫，官方文檔也沒要求，但會引起頁面初始顯示的問題，后面詳解。

 

工作原理

ng-hide條件為true時，向所在元素的class中添加"ng-hide" 進行元素的隱藏；為false時，將"ng-hide"從class中移除，從而使隱藏的元素顯示。

ng-show正好相反。條件為false時，向當前元素的class中添加"ng-hide"進行元素的隱藏；為true時，將"ng-hide"從class中移除，從而使隱藏的元素顯示。

 

ngshow的核心代碼：

$animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, {
     tempClasses: NG_HIDE_IN_PROGRESS_CLASS
});

 

常見問題

# 元素不隨着指定的值進行顯示或隱藏

<div ng-show="{{myValue}}" class="ng-hide"></div>

上述代碼中ng-show 綁定的是{{}}表達式的值對應的字符串，而不是myValue。布爾型對應的是"" 空串 或者 "true" 。所以，myValue值變化后，對於ng-show而言，監視的是固定的字符串，沒有變化。也就不會觸發頁面元素的顯示或隱藏事件。

 

 

# 頁面初始化顯示混亂、閃爍的問題

由於頁面初始化，先處理html顯示，然后是angular js的處理后的顯示，所以js運行前，所有ng-show控制不顯示的內容，在頁面初始化中先顯示，js運行后才隱藏。這個閃爍感主要取決於瀏覽器處理的速度（當然也依賴人的視覺系統，編碼能搞定這事就牛X了）。這個現象在手機上會明顯一些。

簡單的解決方案，在用到ng-show的元素里添加ng-hide class。

<div  class="ng-hide" ng-show="myValue"></div>

還有就是用ng-cloak來處理，原理一樣。