ngShow加载延迟问题 [英] ngShow load delay issue

问题描述

我有当一些按钮cliked是滑动的菜单，但在开始这个菜单是隐藏的，这样的事情：

I have a menu that slides when some button is cliked, but at beginning this menu is hidden, something like that:

<div ng-show="menuShow">
  my menu here...
</div>

问题是，当页面加载菜单是不是隐藏的（可能是因为没有被加载ngShow指令），然后他们消失（可能是因为ngShow指令被加载），并发出奇怪的闪烁效应的菜单。

The issue is when the page is loaded the menu is not hidden (probably because the ngShow directive wasn't loaded) and then they disappears (probably because the ngShow directive was loaded) and making a strange "blink effect" with the menu.

什么是处理这个问题？

推荐答案

做的最快最简单的事情是增加的 ngCloak 指令的元素。

The quickest and simplest thing to do would be to add the ngCloak directive to the element.

<div ng-show="menuShow" ng-cloak>
  my menu here...
</div>

只要角在文件头部分同步加载，这应该prevent闪烁。

As long as Angular is loaded synchronously in the head section of the document, this should prevent the flicker.

如果你不加载角同步，然后根据文档，您可以手动添加CSS的页面：

If you're not loading Angular synchronously, then according to the docs, you could manually add the CSS to the page:

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

如果这是不可能因为某些原因，你可以你只是还没有在初始加载页面的所有角的内容，而是由一个包括NG-包括， NG-视图或用户界面视图指令，或包括其自己的模板的自定义指令。 （这是我如何做到这一点，但更多的结构性原因）

And if this isn't possible for some reason, you can you just have all the Angular content not in the page on initial load, but included by an ng-include, ng-view or ui-view directive, or custom directive that includes its own template. (This is how I do it, but more for structural reasons)

这篇关于ngShow加载延迟问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！