我有一个问题在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>
我有一个问题在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>
当前回答
试着关闭Firebug。我是认真的。这对我很有帮助。
应用已接受的答案,然后确保Firefox中的Firebug已关闭:按F12,然后关闭此页的Firebug -右上角的小按钮。
其他回答
我尝试了上面所有的答案,但都没用。使用ionic开发了一个混合应用程序,并试图使错误信息不闪烁。我最终通过在元素中添加ng-hide类解决了这个问题。我的div已经有ng-show来显示出现错误时的元素。添加ng-hide可以设置div在angular加载之前不显示。没有斗篷或增加角的头必要。
实际上有两个独立的问题会导致闪烁问题,你可能会面临其中一个或两个。
问题1:ng-cloak应用得太晚
这个问题的解决方法是确保AngularJS加载在头文件中。参见ngCloak文档:
为了得到最好的结果,angular.js脚本必须加载在头文件中 HTML文件的部分;或者,CSS规则(上面)必须是 包含在应用程序的外部样式表中。
问题2:ng-cloak被过早移除
当您的页面上有大量的CSS,规则相互层叠,并且在应用顶层之前较深层的CSS闪现时,最可能发生此问题。
jQuery的解决方案包括在元素中添加style="display:none",只要样式被删除得足够晚,就可以解决这个问题(实际上这些解决方案解决了两个问题)。但是,如果你不喜欢直接在HTML中添加样式,你可以使用ng-show来达到同样的效果。
从问题中的例子开始:
<ul ng-show="foo != null" ng-cloak>..</ul>
在元素中添加额外的ng-show规则:
<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>
(为了避免问题1,你需要带上斗篷)。
然后在你的app.run set isPageFullyLoaded:
app.run(['$rootScope', function ($rootScope) {
$rootScope.$safeApply = function (fn) {
$rootScope.isPageFullyLoaded = true;
}
}]);
注意,根据你正在做的事情,app.run可能是设置isPageFullyLoaded的最佳位置,也可能不是。重要的是确保isPageFullyLoaded在你不想闪烁的东西准备好显示给用户后被设置为true。
听起来问题1是OP正在解决的问题,但其他人发现解决方案不起作用或只部分起作用,因为他们正在解决问题2。
重要提示:请确保在ng-cloak应用太晚和移除太快的情况下使用解决方案。仅解决其中一个问题可能无法缓解症状。
避免断行
<meta http-equiv="Content-Security-Policy" content="
default-src 'FOO';
script-src 'FOO';
style-src 'FOO';
font-src 'FOO';">
适用于Firefox 45.0.1
<meta http-equiv="Content-Security-Policy" content=" default-src 'FOO'; script-src 'FOO'; style-src 'FOO'; font-src 'FOO';">
我正在使用ionic框架,添加css样式可能在某些情况下不工作,你可以尝试使用ng-if而不是ng-show / ng-hide
裁判:https://books.google.com.my/books?id=-_5_CwAAQBAJ&pg=PA138&lpg=PA138&dq=ng-show +隐藏+闪烁+ + ios&source = bl&ots = m2Turk8DFh&sig = 8 hniwx26eugr2k_weyavzdixj8k&hl = en&sa = X&redir_esc = y v = onepage&q = ng-show % 20号隐藏% 20闪烁% 20 % 20 ios&f = false
除了其他答案,如果你发现模板代码的闪光仍然发生,这可能是你的脚本在页面的底部,这意味着ng-cloak指令将不会直接工作。您可以将脚本移到头部,也可以创建CSS规则。
文档说:“为了达到最好的效果,angular.js脚本必须加载在html文档的头部部分;或者,上面的CSS规则必须包含在应用程序的外部样式表中。”
现在,它不必是一个外部样式表,而只是在头部的一个元素中。
<style type="text/css">
.ng-cloak {
display: none !important;
}
</style>
来源:https://docs.angularjs.org/api/ng/directive/ngCloak