angularjs – ngShow加载延迟问题

我有一个菜单,当一些按钮被cliked幻灯片,但开始这个菜单是隐藏的,像这样：

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

问题是当页面加载时菜单不被隐藏(可能是因为没有加载ngShow指令),然后它们消失(可能是因为ngShow指令被加载),并且与菜单进行了一个奇怪的“闪烁效应”.

处理这个问题的最好办法是什么？

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

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

只要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指令或自定义指令自己的模板. (这是我怎么做,但是更多的结构性原因)

原文地址：https://www.jb51.cc/angularjs/140705.html