为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

慕函数4003404 2019-10-05 13:13:08

我在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>


查看完整描述

3 回答

?
慕用2447696

尽管文档中没有提到它,但是将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;simple中包含一个规则,Bootstrap的规则将具有优先级,并且display将设置为block,因此您将在模板编译之前看到闪烁。


查看完整回答
反对 回复 2019-10-05
?
aluckdog

如文档中所述,您应该在CSS上添加一个规则以基于ng-cloak属性将其隐藏:


[ng\:cloak], [ng-cloak], .ng-cloak {

    display: none;

}

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


希望有帮助!


查看完整回答
反对 回复 2019-10-05
?
若吾皇

使用ngCloak从来没有让我很幸运。尽管上述所有内容,我仍然会忽悠。避免轻拂的唯一肯定方法是将您的内容放入模板中并包括该模板。在SPA中,唯一由Angular编译之前将被评估的HTML是您的主要index.html页面。


只需将体内的所有东西都粘在一个单独的文件中,然后:


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

您永远都不会那样闪烁,因为Angular在将模板添加到DOM之前会对其进行编译。


查看完整回答
反对 回复 2019-10-05

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信