您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

尽管文档中没有提到它,但是将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,因此您将在模板编译之前看到闪烁。

其他 2022/1/1 18:15:48 有554人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶