ngShow 加载延迟问题答案

【问题标题】：ngShow load delay issuengShow 加载延迟问题
【发布时间】：2016-01-08 00:40:42
【问题描述】：

我有一个菜单，当单击某个按钮时会滑动，但一开始这个菜单是隐藏的，类似于：

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

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

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

【问题讨论】：

标签： angularjs

【解决方案1】：

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

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

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

如果您没有同步加载 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 或 ui-view 指令中，或自定义包含自己的模板的指令。（这就是我的做法，但更多是出于结构性原因）

【讨论】：

嗨！我遇到了完全相同的问题，但是您的答案中的两个选项都对我不起作用:(有什么想法吗？stackoverflow.com/questions/30540119/…
很好的答案，因为同步微分。在我的情况下，角度没有加载到头部，所以我不得不手动添加 CSS 类。

【解决方案2】：

即使应用 CSS 规则，我也无法让 ng-cloak 工作，所以我最终使用了 ng-if。 https://docs.angularjs.org/api/ng/directive/ngIf

这会导致更多的开销，因为 Angular 实际上会从 DOM 中删除对象并在每次 ng-if 的值更改时重新加载它，但在我的情况下，这不是很频繁，开销也不明显。

【讨论】：