ngShow负载延迟问题

Question

我有一个菜单可以在某个按钮被按下时滑动，但是在开始时这个菜单被隐藏了，就像这样：

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

问题是当页面被加载时，菜单没有被隐藏（可能是因为没有加载ngShow指令）然后它们消失了（可能是因为加载了ngShow指令）并且使用了一个奇怪的“闪烁效果”菜单。

处理这个问题的最佳方法是什么？

Answer 1

最快最简单的方法是将ngCloak指令添加到元素中。

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

只要Angular在文档的head部分同步加载，就可以防止闪烁。

如果你没有同步加载Angular，那么according to the docs，你可以手动将CSS添加到页面中：

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

如果出于某种原因无法做到这一点，您可以在初始加载时让所有Angular内容不在页面中，但ng-include，ng-view或{{1指令，或包含自己的模板的自定义指令。 （这是我如何做的，但更多是出于结构原因）