在AngularJS中，如何加载隐藏元素的页面？

Question

在AngularJS中，如何确保HTML元素在加载页面时以隐藏状态启动？

在我的页面上有一个初始延迟，同时创建控制器，在该元素消失之前可以在屏幕上看到该元素。

我尝试过以各种方式组合这些属性：

<li 
    data-ng-show
    data-ng-if
    data-ng-cloak
    class="ng-hide"

但元素在消失前总是在屏幕上显示半秒钟。

Answer 1

有几种方法可以做到这一点。

只有当ng-app被触发时，AngularJS才会启动 引导可以在某个时间点手动完成。

angular.module('appName', []);

angular.element(document).ready(function(){
  angular.bootstrap(document, ['appName']);
});

另一种方法是使用ng-cloak。这允许您仅在AngularJS引导时显示页面的一部分。

在AngularJS引导之前，在你想要隐藏的部分设置class="ng-cloak"。
Angular包含此类，只需对其应用display : none !important 一旦应用程序被引导，角度会查找这些元素并显示它们。

请注意，最好在配置方法中生成resolves或声明（您可以声明的内容）

Answer 2

管理页面加载的正确方法是使用＆＃34; resolve＆＃34;在路由中：它将仅在异步调用返回时提供对控制器的访问和部分访问。

请参阅本文档中的解决方案：

 https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

对于您的问题，如果您仍然需要ng-show，那么如果您将变量初始化为false，它应该可以正常工作。

编辑：抱歉，ng-show似乎确实在角度自举方面存在问题。

Answer 3

要使ng-Cloak生效，请确保您也拥有相应的CSS规则：

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

见这里：

https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 4

给他们一个css类，最初将它们设置为setInterval();。当Angular最终启动时，display: none / ng-show / ng-hide应该根据需要覆盖它们。当页面完成渲染DOM但是Angular已经开始时，它们全部可见尚未初始化。