解决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属性，容易出现问题 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |