盎格鲁- 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-if而不是ng-show。ng-if完全删除并重新创建DOM中的元素，并有助于避免ng-shows闪烁。

其他回答

正如在文档中提到的，你应该添加一个规则到你的CSS来隐藏它基于ng-cloak属性:

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}

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

希望有帮助!

上面列出的解决方案没有一个对我有效。然后我决定看看实际的函数，并意识到当“$scope.”Watch”被解雇了，它在name字段中放置了一个值，这并不意味着是这样的情况。在代码中，我设置oldValue和newValue

$scope.$watch('model.value', function(newValue, oldValue) {
if (newValue !== oldValue) {
validateValue(newValue);
}
});

本质上，当范围。在这种情况下，AngularJS监视name变量(model.value)的变化。

我在使用ngCloak时从未有过太多的运气。尽管上面提到了一切，我仍然会看到闪烁。避免弹移的唯一可靠方法是将内容放在模板中并包含该模板。在SPA中，唯一在被Angular编译之前会被评估的HTML是你的主index.html页面。

只需要把身体里的所有东西都放在一个单独的文件里，然后:

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

这样你就不会看到任何闪烁，因为Angular会在将模板添加到DOM之前对其进行编译。

我尝试了上面所有的答案，但都没用。使用ionic开发了一个混合应用程序，并试图使错误信息不闪烁。我最终通过在元素中添加ng-hide类解决了这个问题。我的div已经有ng-show来显示出现错误时的元素。添加ng-hide可以设置div在angular加载之前不显示。没有斗篷或增加角的头必要。

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

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

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

推荐文章