盎格鲁- ngcloak / ngg展示blink元素

我有一个问题在angular.js的指令/类ng-斗篷或ng-show。

Chrome运行正常，但Firefox使用ng-cloak或ng-show导致元素闪烁。恕我直言，这是由于将ng-cloak/ng-show转换为style="display: none;"，可能Firefox javascript编译器有点慢，所以元素出现一段时间，然后隐藏?

例子:

<ul ng-show="foo != null" ng-cloak>..</ul>

当前回答

确保AngularJS包含在HTML的头部。参见ngCloak文档:

为了得到最好的结果，angular.js脚本必须加载在头文件中 HTML文件的部分;或者，CSS规则(上面)必须是包含在应用程序的外部样式表中。

其他回答

你最好参考angular文档，因为版本[1.4.9]已经更新到下面，使得它可以支持data-ng-cloak指令。

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

我会用<div ng-cloak>包裹<ul>

正如在文档中提到的，你应该添加一个规则到你的CSS来隐藏它基于ng-cloak属性:

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}

我们在“用Angular构建”网站上使用了类似的技巧，你可以在Github上查看源代码:https://github.com/angular/builtwith.angularjs.org

希望有帮助!

尝试了ng-cloak，但仍然眨眼。下面的代码完全清除它们。

<body style="display:none;" ng-style="{'display':'block'}">

除了已接受的答案，如果你正在使用另一种触发ng-cloak的方法…

你也可能希望添加一些额外的特性到你的CSS/LESS:

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

推荐文章