javascript - AngularJs ng-cloak 大页面上 CSS 显示问题 :none

标签 javascript css angularjs

我一直在开发一个相当复杂且大型的 Angular 页面。与典型的 AngularJS SPA 风格应用程序不同,这个特定的页面就是这样:一个包含大量数据的页面,必须一次性全部可见。问题是,当这个大页面加载时,它会闪烁并短暂显示模板标记,然后再开始实际的内容渲染。这就是 Angular ng-cloak 应该解决的问题,但在这种情况下我没能让它正常工作。

CSS

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

HTML

<body ng-controller="MainCtrl">
   <button class="btn btn-primary" ng-click="loadSomething()">Load Something</button>
   <br/>
   <div ng-hide="loaded">
      Loading...
   </div>
   <div ng-show="loaded">
      <p>{{ text }}</p>
   </div>
</body>

最佳答案

您需要在您要隐藏的东西上实际使用该类:

<ANY class="ng-cloak"> ... </ANY>

关于javascript - AngularJs ng-cloak 大页面上 CSS 显示问题 :none,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47651560/

相关文章:

css - 如何使用 @include sass 做一些事情

html - 如何使背景元素在ipad上不可点击

javascript - 带有 javascript 的样式输入类型文件

javascript - 在 AngularJS 中使用复选框时遇到一些困难

javascript - 当 DOM 在 iOS 中准备就绪时,如何强制关注文本字段?

html - 当我为 body 标签使用 100% 宽度时,我如何知道使用了多少像素

javascript - 使用 ng-repeat 和过滤器,如何判断哪些项目是可见的?

javascript - Angular.js - 根据 View 显示链接

javascript - 在加载时为预先选中的复选框运行 ng-change 函数

javascript - 在 Express 4 和 express-generator's/bin/www 中使用 socket.io