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

发布时间：2020-12-17 09:31:13 所属栏目：安全来源：网络整理

导读：我有一个问题在angular.js与指令/类ng-cloak或ng-show。 Chrome运行正常，但Firefox使用ng-cloak或ng-show使元素闪烁。 IMHO它是由转换ng-cloak / ng-show到style =“display：none;”引起的，可能Firefox javascript编译器有点慢，所以元素出现一段时间，然

我有一个问题在angular.js与指令/类ng-cloak或ng-show。

Chrome运行正常，但Firefox使用ng-cloak或ng-show使元素闪烁。
IMHO它是由转换ng-cloak / ng-show到style =“display：none;”引起的，可能Firefox javascript编译器有点慢，所以元素出现一段时间，然后隐藏？

例：

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

虽然文档没有提到它，它可能不足以添加display：none;规则到您的CSS。如果你在body中加载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;
}

所以如果你包含一个简单的显示：none，Bootstrap的规则将优先，显示将被设置为块，所以你会看到在模板编译之前的闪烁。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!