如何消除 ngShow 初始化的延迟？当 ng-cloak 失败时？

Question

我运行准确 same problem found in this question。然而，这两个答案对我来说都不起作用。

我的问题视频：https://www.youtube.com/watch?v=ByjmwmamemM

当我的应用程序加载时，有几个弹出窗口对所有这些弹出窗口进行了 ng-show 检查。它们都从 false 开始，但是在 3-4 秒（很长时间）后弹出窗口出现，然后消失。

根据我上面链接的问题的答案，我应该尝试在头部部分的顶部加载 Angular，如果这不起作用，则将 .ng-cloak 添加到我的CSS 和有问题的 divs。

两者均无效:(

其他人运行以前遇到过这个问题吗？

Index.html:

<body ng-app="tickertags">

    <div ui-view></div>

dashboard.html <- 第一个模板加载到 ui-view

<div ng-controller="DashCtrl">
    <top-notification></top-notification>
    <alerts-panel></alerts-panel>
    <search-popover></search-popover>
    <tags-search></tags-search>
    <tags-filter></tags-filter>

    <div class="dash-body" ng-click="bodyClick()">
        <header>
            <platform-header></platform-header>
            <control-header></control-header>
            <view-header></view-header>
        </header>

        <tickers-panel></tickers-panel>
        <tags-panel></tags-panel>

        <section id="panel-activity" class="activity-panel">
            <chart-header></chart-header>
            <chart-iq></chart-iq>
            <social-media-panel></social-media-panel>
        </section>
    </div>

    <overlay></overlay>
</div>

弹出窗口：

searchPopover:（隐藏前 3-4 秒）

<div ng-show="searchPopoverDisplay" class="search-popover" ng-cloak>

tagSearchPopover:（隐藏前 3-4 秒）

<div ng-show="tagsSearch.tagsFuzzyResults" class="tag-search-popover" ng-cloak>

tagFilterPopover:（<- 这个 popover 消失最快，0.5 秒）

<div ng-show="tagsFilterOn" class="tags-filter-popover" ng-click="captureClick()" ng-cloak>

ng-斗篷

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

Answer 1

在 css 中默认隐藏它们，然后在 angular 加载时覆盖。 3-4 秒的延迟可能是在您发出的所有其他请求中获取和加载 angular 所花费的时间（您应该检查您的网络面板）。

.display-on {
    display: block !important;
    opacity: 1 !important;
}

ng-class="{'display-on': searchPopoverDisplay}"

Answer 2

我知道这个问题已经得到解答，但我有另一个解决方案。

使用 bootstrap.css:

<div class="collapse" ng-class="{'collapse': [falsy after ng evaluates] }"

如果需要，这将移除折叠 class，但它会以隐藏状态开始，直到 angular 可以对其进行评估。

否则使用设置 display:none 的任何 class，并使用 ng-class.

删除它

Answer 3

要使 div 默认隐藏并防止它在页面完全加载之前显示，您可以将 ng-hide 添加到 class 属性。例如：

<div ng-show="searchPopoverDisplay ng-hide" class="search-popover" ng-cloak>

如何消除 ngShow 初始化的延迟？当 ng-cloak 失败时？

How to remove delay from ngShow initialization? When ng-cloak fails?

javascript

angularjs

angularjs-ng-show