我有一个问题在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>

当前回答

除了其他答案,如果你发现模板代码的闪光仍然发生,这可能是你的脚本在页面的底部,这意味着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

其他回答

保持下面的声明在头标签固定了这个问题

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

官方文档

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

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

我在指令中使用ng-show来显示和隐藏弹出窗口。

<div class="..." ng-show="showPopup">

以上这些方法都不适合我,使用ng-if而不是ng-show就太过分了。这意味着每次单击时都要删除整个弹出内容并将其添加到DOM中。相反,我在同一元素中添加了ng-if,以确保它不会在文档加载时显示:

<div class="..." ng-show="showPopup" ng-if="popupReady">

之后,我将初始化添加到负责该指令的控制器中,并设置了一个超时:

$timeout(function () {
    $scope.popupReady = true;
});

通过这种方式,我消除了闪烁问题,并避免了在每次单击时插入DOM的昂贵操作。这样做的代价是使用两个作用域变量来实现相同的目的,而不是一个,但到目前为止,这绝对是最好的选择。

由以上讨论可知

[ng-cloak] {
                display: none;
            }

是解决这个问题的完美方法。

我们在公司遇到了这个问题,并通过在CSS样式中为那些闪烁的ng-show元素添加“display: none”来解决它。我们根本不需要使用ng-cloak。不像这篇文章中的其他人,我们在Safari中遇到了这个问题,而不是Firefox或Chrome——可能是由于Safari在iOS7中的懒惰重绘错误。