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

其他回答

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

我尝试了上面的ng-cloak解决方案,但它在Firefox上仍然有间歇性的问题。 对我来说,唯一有效的解决方法是延迟加载表单,直到Angular完全加载完毕。

我只是在应用程序中添加了ng-init,并在窗体侧使用ng-if来检查我设置的变量是否已经加载。

<div ng-app="myApp" ng-init="loaded='yes'"> 
   <form ng-if="loaded.length > 0">
      <!--all my elements here-->
   </form>
</div>

我在指令中使用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的昂贵操作。这样做的代价是使用两个作用域变量来实现相同的目的,而不是一个,但到目前为止,这绝对是最好的选择。

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

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

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

希望有帮助!

我正在使用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