Angularjs - ng-cloak/ng-show元素闪烁

Question

我在angular.js中有一个带有指令/类ng-cloak或问题的问题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>

Answer 1

虽然文档没有提到它,但是将display: none;规则添加到CSS 可能还不够.如果您在正文中加载angular.js或模板未尽快编译,请使用该ng-cloak指令并在CSS中包含以下内容:

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

正如评论中所提到的,这!important很重要.例如,如果您有以下标记

<ul class="nav">
  <li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>

并且您碰巧正在使用bootstrap.css,以下选择器更适合您的ng-cloak'ed元素

.nav > li > a {
  display: block;
}

因此,如果简单地包含一个规则display: none;,Bootstrap的规则将优先,并且display将设置为block,因此您将在模板编译之前看到闪烁.

Answer 2

如文档中所述,您应该向CSS添加规则以根据ng-cloak属性隐藏它:

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

我们在"Built with Angular"网站上使用类似的技巧,您可以在Github上查看源代码:https://github.com/angular/builtwith.angularjs.org

希望有所帮助!

Answer 3

确保AngularJS包含在headHTML中.请参阅ngCloak doc:

为了获得最佳结果,必须在html文件的head部分中加载angular.js脚本; 或者,css规则(上面)必须包含在应用程序的外部样式表中.

Answer 4

我使用ngCloak从来没有太多运气.尽管如上所述,我仍然会闪烁.避免轻弹的唯一可靠方法是将您的内容放在模板中并包含模板.在SPA中,唯一将在Angular编译之前评估的HTML是您的主要index.html页面.

只需取出身体内的所有物品并将其粘贴在单独的文件中,然后:

<ng-include src="'views/indexMain.html'"></ng-include>

你永远不应该得到任何闪烁,因为Angular会在将模板添加到DOM之前编译模板.

Answer 5

ngBind和ngBindTemplate是不需要CSS的替代品:

<div ng-show="foo != null" ng-cloak>{{name}}</div>  <!-- requires CSS -->
<div ng-show="foo != null" ng-bind="name"></div>
<div ng-show="foo != null" ng-bind-template="name = {{name}}"></div>

Answer 6

除了你接受的答案,如果你正在使用另一种触发ng-cloak的方法......

您可能还希望为CSS/LESS添加一些额外的特性:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
    display: none !important;
}

Answer 7

我有一个类似的问题,发现如果你有一个包含转换的类,元素将闪烁.我尝试添加ng-cloak但没有成功,但是通过删除转换按钮停止闪烁.

我正在使用离子框架,按钮轮廓有这种转变

.button-outline {
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
}

只需覆盖该类即可删除转换,按钮将停止闪烁.

更新

再次使用离子时,使用ng-show/ng-hide时会出现闪烁现象.添加以下CSS可以解决它:

.ng-hide-add,
.ng-hide-remove {
  display: none !important;
}

资料来源:http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9

Answer 8

我有一个问题<div ng-show="expression">,即在"ng-show"指令有机会运行之前,即使"表达式"最初为假,也会在几分之一秒内初现可见.

我使用的解决方案是手动添加"ng-hide"类<div ng-show="expression" ng-hide>,以确保它最初隐藏起来.ng-show指令将在必要时添加/删除ng-hide类.

Answer 9

尝试关闭Firebug.我是认真的.这有助于我的情况.

应用已接受的答案,然后确保Firefox 中的Firebug已关闭:按F12,然后关闭此页面的Firebug - 右上角的小按钮.

Answer 10

实际上有两个可能导致闪烁问题的独立问题,您可能面临其中一个或两个.

问题1:ng-cloak应用太晚了

这个问题已经解决,因为这个页面上的许多答案都是为了确保AngularJS被加载到头部.请参阅ngCloak doc:

为了获得最佳结果,必须在html文件的head部分中加载angular.js脚本; 或者,css规则(上面)必须包含在应用程序的外部样式表中.

问题2:过早删除ng-cloak

如果您的页面上有很多CSS,并且规则层叠在一起,并且在应用顶层之前CSS的较深层会闪烁,则最有可能发生此问题.

style="display:none"只要样式被删除得足够晚(实际上这些解决方案解决了这两个问题),jQuery解决方案的答案涉及添加到您的元素确实解决了这个问题.但是,如果您不想直接向HTML添加样式,则可以使用相同的结果ng-show.

从问题中的示例开始:

<ul ng-show="foo != null" ng-cloak>..</ul>

在元素中添加额外的ng-show规则:

<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>

(你需要保持ng-cloak避免问题1).

然后在你的app.run中设置isPageFullyLoaded:

app.run(['$rootScope', function ($rootScope) {
    $rootScope.$safeApply = function (fn) {
        $rootScope.isPageFullyLoaded = true;
    }
}]);

请注意,根据您正在做的事情,app.run可能是也可能不是最好的设置位置isPageFullyLoaded.重要的是要确保isPageFullyLoaded在你不想闪烁之后将其设置为true,以便向用户显示.

听起来像问题1是OP正在遇到的问题,但是其他人发现解决方案不起作用或者只是部分起作用,因为他们正在反击问题2或者也是如此.

重要说明:请确保对应用太晚的ng-cloak和即将移除的ng-cloak应用解决方案.仅解决这些问题中的一个可能无法缓解症状.