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

In AngularJS how do you load a page with an element hidden?

本文关键字：隐藏 元素 加载 AngularJS 何加载      更新时间：2023-09-26

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

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

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

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

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

管理页面加载的正确方法是在路由中使用"resolve"：它将只在异步调用返回时授予对控制器和部分的访问权限。

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

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

对于您的问题，如果您仍然需要ng-show，那么如果您将变量初始化为false，它应该会起作用。

编辑：对不起，ng节目似乎在角度引导方面有问题。

要使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

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

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

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

另一种方法是使用CCD_ 2。这允许您仅在AngularJS启动时显示页面的一部分。

在AngularJS启动之前，在你不想隐藏的部分设置一个class="ng-cloak"
Angular包含该类，并仅对其应用display : none !important。
一旦应用程序启动，就可以从各个角度查找并显示这些元素。

注意，在您的配置方法

中使resolves或声明（您可以声明的内容）是一种很好的做法

给它们一个css类，该类最初将它们设置为display: none。当Angular最终启动时，ng-show/ng-hide/ng-if应该根据需要覆盖它们。由于页面已经完成了DOM的渲染，但Angular还没有初始化，所以在一开始就可以看到它们。

相关文章：