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

当前回答

避免断行

<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';">

其他回答

我尝试了这里发布的每一个解决方案,仍然在Firefox中闪烁。

如果它有助于任何人,我通过添加style="display: none;"到主要内容div,然后使用jQuery(我已经在页面上使用它)$('#main-div-id').show();一旦从服务器获取数据后加载了所有内容;

我尝试了上面的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-class属性而不是ng-show。我在这方面取得了很多成功,特别是在默认情况下总是不显示弹出窗口的情况下。

以前是什么<div class="options-modal" ng-show="showOptions"></div>

“股票期权”>

options-modal类的CSS显示:默认为none。show类包含了display:block CSS。

我遇到了一个问题,在ng-show指令有机会运行之前,<div ng-show="expression">最初会在几分之一秒内可见,即使"expression"最初是假的。

我使用的解决方案是手动添加“ng-hide”类,如<div ng-show="expression" ng-hide>,以确保它一开始是隐藏的。ng-show指令将在此之后根据需要添加/删除ng-hide类。

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

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