AngularJS：未出场 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 -展示。有没有办法让 ng-show 更优先？

此外，您可能认为我最初可以将 $scope.show_element 保留为 false 以隐藏它。但在那种情况下，我会在加载页面时短暂地瞥见元素，这从用户体验的角度来看并不好。

Answer 1

使其适用于您的情况的一种方法是使用 ng-class，如果元素应该可见，您可以应用 class 并正确显示属性即 display: block 如果你的速度慢 bootstrap 你可以使用 ng-cloak 在此处查看文档 https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

我只想更改 class。 ng-shows 的功能是简单地添加或删除 ng-hide class，它唯一的属性是 "display: none !important;"。更改 classes 的 css 不是 ment。

你可以简单地做这样的事情：

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

并使用 display:block;

将 element_class 设置为您的 class

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

希望这对您有所帮助。

编辑：唔，太慢了，已经说了两次了

Answer 3

另一个简单的选择

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

Answer 4

如果您只是想隐藏该项目以免加载时出现闪光灯，则不要使用 .item class 设置为 display:none，您可以简单地将 .ng-hide 的 class 设置为启用 ng-show 的元素。

AngularJS 指令 ng-show 通过向 DOM 元素添加或删除 .ng-hide 的 class 来工作。 .ng-hide class 应用规则 display: none !important;

<div class="ng-hide" ng-show="showElement">...</div>

AngularJS：未出场 vs display:none

AngularJS: ng-show vs display:none

javascript

css

angularjs

ng-show