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来处理，原理一样。