盎格鲁- ngcloak / ngg展示blink元素

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

当前回答

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

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

其他回答

你最好参考angular文档，因为版本[1.4.9]已经更新到下面，使得它可以支持data-ng-cloak指令。

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

尝试了ng-cloak，但仍然眨眼。下面的代码完全清除它们。

<body style="display:none;" ng-style="{'display':'block'}">

由以上讨论可知

[ng-cloak] {
                display: none;
            }

是解决这个问题的完美方法。

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

你也可能希望添加一些额外的特性到你的CSS/LESS:

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

除了其他答案，如果你发现模板代码的闪光仍然发生，这可能是你的脚本在页面的底部，这意味着ng-cloak指令将不会直接工作。您可以将脚本移到头部，也可以创建CSS规则。

文档说:“为了达到最好的效果，angular.js脚本必须加载在html文档的头部部分;或者，上面的CSS规则必须包含在应用程序的外部样式表中。”

现在，它不必是一个外部样式表，而只是在头部的一个元素中。

<style type="text/css">
  .ng-cloak {
    display: none !important;
  }
</style>

来源:https://docs.angularjs.org/api/ng/directive/ngCloak

推荐文章