AngularJS:ng-show与display:none [英] AngularJS: ng-show vs display:none

问题描述

我有一个用例，默认情况下，必须使用CSS来隐藏HTML元素，如下所示:

I had a use case whereby I have to keep an HTML element hidden by default using CSS as follows:

HTML:

<div class="item">
</div>

CSS:

.item {
    display: none;
}

但是，我需要在页面加载后使用ng-show切换元素的可见性:

But, I need to toggle the element's visibility using ng-show after the page has loaded as follows:

<div class="item" ng-show="show_element">
</div>

但是，即使将$scope.show_element设置为true，该元素也不可见，即css属性覆盖了AngularJS的ng-show.有什么办法可以让ng-show拥有更高的优先级?

But, even if $scope.show_element is set to true, the element doesn't become visible, that is, the css property is overriding AngularJS' ng-show. Is there any way to give ng-show more priority?

此外，您可能会认为我可以将$scope.show_element保留为假，以将其隐藏.但是在那种情况下，我在页面加载时只看到了很短的一眼，这从UX的角度来看是不好的.

Also, you may think I can keep $scope.show_element as false initially to hide it. But in that case, I get a very short glimpse of the element when the page is loading which is not good from the UX point of view.

推荐答案

在您的情况下使其工作的一种方法是使用ng-class，在这种情况下，当元素可见时，您可以应用具有正确显示属性的类，即display: block，如果您遇到引导速度慢的问题，可以使用ng-cloak在此处 https://docs.angularjs检查文档. org/api/ng/directive/ngCloak

One way to make it work in your case would be using ng-class where in case when element should be visible you can apply class with correct display property i.e. display: block and if you suffer from slow bootstrap you can use ng-cloak check documentation here https://docs.angularjs.org/api/ng/directive/ngCloak

这篇关于AngularJS:ng-show与display:none的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！