盎格鲁- 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>

当前回答

除了其他答案，如果你发现模板代码的闪光仍然发生，这可能是你的脚本在页面的底部，这意味着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

其他回答

我有一个类似的问题，并发现如果你有一个类包含过渡，元素将闪烁。我试图添加ng-cloak，但没有成功，但通过删除过渡按钮停止闪烁。

我用的是离子框架，纽扣轮廓有这样的过渡

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

只需重写类以删除转换，按钮就会停止闪烁。

更新

同样，在ionic上使用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

我个人决定使用ng-class属性而不是ng-show。我在这方面取得了很多成功，特别是在默认情况下总是不显示弹出窗口的情况下。

以前是什么<div class="options-modal" ng-show="showOptions"></div>

“股票期权”>

options-modal类的CSS显示:默认为none。show类包含了display:block CSS。

除了已接受的答案，如果你正在使用另一种触发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] {
                display: none;
            }

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

保持下面的声明在头标签固定了这个问题

<style type="text/css">
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}
</style>

官方文档

推荐文章