我有一个问题在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>
当前回答
我尝试了这里发布的每一个解决方案,仍然在Firefox中闪烁。
如果它有助于任何人,我通过添加style="display: none;"到主要内容div,然后使用jQuery(我已经在页面上使用它)$('#main-div-id').show();一旦从服务器获取数据后加载了所有内容;
其他回答
最好使用ng-if而不是ng-show。ng-if完全删除并重新创建DOM中的元素,并有助于避免ng-shows闪烁。
实际上,我发现Rick Strahl's Web Log的建议完美地解决了我的问题(因为我仍然有ng-cloak有时会闪烁原始{{code}}的奇怪问题,特别是在运行Firebug时):
核心选项:手动隐藏内容
使用显式CSS是最好的选择,所以下面的内容应该是不必要的。但我在这里提到它,因为它提供了一些见解,如何在其他框架或自己的基于标记的模板加载时手动隐藏/显示内容。
在我搞清楚我可以显式地将CSS样式嵌入到页面之前,我曾试图弄清楚为什么ng-cloak没有完成它的工作。在浪费了一个小时的时间后,我最终决定手动隐藏并显示容器。想法很简单——最初隐藏容器,然后在Angular完成初始处理并从页面中删除模板标记后显示它。
你可以手动隐藏内容,并在Angular获得控制权后使其可见。为此,我使用:
<div id="mainContainer" class="mainContainer boxshadow"
ng-app="app" style="display:none">
注意display: none样式,它显式地隐藏了页面上最初的元素。
一旦Angular运行了初始化,并有效地处理了页面上的模板标记,你就可以显示内容了。对于Angular来说,这个' ready '事件就是app.run()函数:
app.run( function ($rootScope, $location, cellService) {
$("#mainContainer").show();
…
});
这有效地删除了display:none样式和内容显示。当app.run()触发时,DOM已经准备好显示已填充的数据,或者至少是空数据——Angular已经获得了控制权。
我在使用ngCloak时从未有过太多的运气。尽管上面提到了一切,我仍然会看到闪烁。避免弹移的唯一可靠方法是将内容放在模板中并包含该模板。在SPA中,唯一在被Angular编译之前会被评估的HTML是你的主index.html页面。
只需要把身体里的所有东西都放在一个单独的文件里,然后:
<ng-include src="'views/indexMain.html'"></ng-include>
这样你就不会看到任何闪烁,因为Angular会在将模板添加到DOM之前对其进行编译。
我们在公司遇到了这个问题,并通过在CSS样式中为那些闪烁的ng-show元素添加“display: none”来解决它。我们根本不需要使用ng-cloak。不像这篇文章中的其他人,我们在Safari中遇到了这个问题,而不是Firefox或Chrome——可能是由于Safari在iOS7中的懒惰重绘错误。
除了已接受的答案,如果你正在使用另一种触发ng-cloak的方法…
你也可能希望添加一些额外的特性到你的CSS/LESS:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
display: none !important;
}