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

转载于:https://www.cnblogs.com/itman70s/p/ngshow.html

AngularJS 指令之 ng-hide/ng-show相关推荐

【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下通常大家在使用 ...
AngularJS 指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
AngularJS指令封装高德地图组件
2019独角兽企业重金招聘Python工程师标准>>> 1 概述公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图 ...
如何调用AngularJS指令中定义的方法？
本文翻译自:How to call a method defined in an AngularJS directive? I have a directive, here is the code : ...
AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为指令的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用指令: ng-app 指令 ...
AngularJS 指令实践指南（二）
这个系列教程的第一部分给出了AngularJS指令的基本概述,在文章的最后我们介绍了如何隔离一个指令的scope.第二部分将承接上一篇继续介绍.首先,我们会看到在使用隔离scope的情况下,如何从指令 ...
Polymer元素和AngularJS指令有什么区别？
本文翻译自:What is the difference between Polymer elements and AngularJS directives? On the Polymer Getti ...
AngularJS指令范围中的#39;@#39;和#39;=#39;有什么区别？
本文翻译自:What is the difference between '@' and '=' in directive scope in AngularJS? I've read the Angu ...
angularjs指令中的compile与link函数详解
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...
AngularJS 指令实践
2019独角兽企业重金招聘Python工程师标准>>> 指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经 ...

AngularJS 指令之 ng-hide/ng-show

AngularJS 指令之 ng-hide/ng-show相关推荐

最新文章

热门文章