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

还有一种方式是，在页面最上方加入控制显隐的样式，样式设置为隐藏。页面下方再把该样式覆盖为显示

<style>
.message-show{
    display: none;
}
</style>
<body>
    <div class="message-show">
      一闪而过的文字，多出现在angular的{{}}情况下
    </div>
</body>
<style>
.message-show{
    display: block;
}
</style>

缺点是，如果该div本来有display属性，容易出现问题

解决ng-show闪现问题

相关文章