能够在 Firefox 中加载页面之前查看隐藏元素的预览

Question

所以在我的网页上，我有几个元素应该在初始页面加载时隐藏（如错误消息），但如果它们满足特定条件则应该显示。我正在使用 Angular JS。

问题是，虽然它在 Chrome 中运行良好，但在 Firefox 中，您可以短暂地看到隐藏元素的预览，这些元素在页面完全加载后就会消失。我想避免这种情况。

<span id="invalidDate" ng-show="invalidDateEntered==true" class="alert">Invalid Date Format</span>

所以我可以在页面在 Firefox 中完全加载之前看到此警告 Invalid Date Format，但它很快就会消失。我已经尝试使用 ng-init 来防止这种情况，但没有帮助。

<span id="invalidDate" ng-init="invalidDateEntered=false" ng-show="invalidDateEntered==true" class="alert">Invalid Date Format</span>

关于如何解决这个问题有什么想法吗？

Answer 1

对元素使用 ng-cloak:-

<span id="invalidDate" ng-cloak ng-show="invalidDateEntered==true" class="alert">Invalid Date Format</span>

在Css中：-

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}