AngularJS：ng-show vs display：none

Question

我有一个用例，我必须使用CSS隐藏HTML元素，如下所示：

HTML：

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

CSS：

.item {
    display: none;
}

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

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

但是，即使$scope.show_element设置为true，该元素也不会显示，也就是说，css属性会覆盖AngularJS的ng-show。有没有办法让ng-show更优先？

另外，您可能认为我最初可能会将$scope.show_element保留为false以隐藏它。但是在这种情况下，当页面加载时我会很快看到元素，这从UX的角度来看并不好。

Answer 1

在你的情况下使其工作的一种方法是使用ng-class，如果元素应该可见，你可以应用具有正确显示属性的类，即display: block，如果你遭受慢速引导你可以在https://docs.angularjs.org/api/ng/directive/ngCloak

使用ng-cloak检查文档

Answer 2

另一个简单的替代方案

style="{{show_element?'display:block !important':'display:none !important'}}"

Answer 3

如果您只是想隐藏项目以便不加载闪存，那么您可以简单地设置一个类，而不是使用设置为.item的{​​{1}}类。 display:none对.ng-hide开启的元素。

AngularJS指令ng-show的工作原理是向DOM元素添加或删除ng-show类。 .ng-hide类适用规则.ng-hide

display: none !important;

Answer 4

我只是改变了课程。 Ng-shows函数是简单地添加或删除ng-hide类，其中只有属性是＆＃34; display：none！important;＆＃34;。改变班级的CSS是没有意义的。

你可以做的就是这样：

<div class="{{element_class}} item">
</div>

使用 display：block;

将 element_class 设置为您的班级

工作示例： http://codepen.io/GriessbreiLP/pen/EVXQjK

希望这对你有所帮助。

编辑： 不，太慢了，已经两次提到了。