我在 angular.js 中遇到指令/类ng-cloak或ng-show.
Chrome 工作正常，但 Firefox 导致带有ng-cloak或的元素闪烁ng-show。恕我直言，这是由转换ng-cloak/ ng-showto引起的style="display: none;"，可能是 Firefox javascript 编译器有点慢，所以元素出现一段时间然后隐藏？
例子：
<ul ng-show="foo != null" ng-cloak>..</ul>
Angularjs - ng-cloak/ng-show 元素闪烁
IT技术
javascript
class
angularjs
2021-01-30 08:06:41
6个回答
虽然文档没有提到它，但将display: none;规则添加到 CSS 中可能还不够。如果您在主体中加载 angular.js 或模板未及时编译，请使用该ng-cloak指令并在您的 CSS 中包含以下内容：
/*
Allow angular.js to be loaded in body, hiding cloaked elements until
templates compile. The !important is important given that there may be
other selectors that are more specific or come later and might alter display.
*/
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
正如评论中提到的，这!important很重要。例如，如果您有以下标记
<ul class="nav">
<li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>
并且您碰巧正在使用bootstrap.css，以下选择器更适合您的ng-cloak'ed 元素
.nav > li > a {
display: block;
}
因此，如果您使用display: none;simple包含规则，Bootstrap 的规则将优先并且display将设置为block，因此您将在模板编译之前看到闪烁。
如文档中所述，您应该向 CSS 添加规则以根据ng-cloak属性隐藏它：
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none;
}
我们在“Built with Angular”站点上使用了类似的技巧，您可以在 Github 上查看其源代码：https : //github.com/angular/builtwith.angularjs.org
希望有帮助！
确保 AngularJS 包含在headHTML 中。参见ngCloak 文档：
为获得最佳效果，必须在 html 文件的 head 部分加载 angular.js 脚本；或者，css 规则（以上）必须包含在应用程序的外部样式表中。
我使用 ngCloak 从来没有这么幸运过。尽管有上面提到的一切，我仍然会闪烁。避免轻弹的唯一可靠方法是将您的内容放在模板中并包含该模板。在 SPA 中，在被 Angular 编译之前唯一需要评估的 HTML 是您的主要 index.html 页面。
只需将身体内部的所有东西都放在一个单独的文件中，然后：
<ng-include src="'views/indexMain.html'"></ng-include>
您永远不应该以这种方式闪烁，因为 Angular 会在将模板添加到 DOM 之前对其进行编译。
ngBind和ngBindTemplate是不需要 CSS 的替代方案：
<div ng-show="foo != null" ng-cloak>{{name}}</div> <!-- requires CSS -->
<div ng-show="foo != null" ng-bind="name"></div>
<div ng-show="foo != null" ng-bind-template="name = {{name}}"></div>