Question

我遇到了确切的same problem found in this question。但是这两个答案在我的案例中都不起作用。

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

enter image description here

当我的应用加载时，有几个弹出窗口都有ng-show检查。它们都从false开始，然而3-4秒（长时间）弹出窗口出现，然后消失。

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

两者都不起作用：（

其他人之前遇到过这个问题吗？

的index.html：

enter image description here

<body ng-app="tickertags">

    <div ui-view></div>

dashboard.html ＆lt; - 加载到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>

弹出窗口：

enter image description here

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：（＆lt; - 此弹出消失最快，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中隐藏它们，然后在角度加载时覆盖它们。 3-4秒延迟可能是在您正在进行的所有其他请求中获取和加载角度所需的时间（您应该检查您的网络面板）。

.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] }"

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

否则使用任何设置display：none的类，并使用ng-class删除它。

Answer 3

要默认隐藏div并阻止在完全加载页面之前显示该ng-hide，您可以将class添加到<div ng-show="searchPopoverDisplay ng-hide" class="search-popover" ng-cloak>属性。 E.g：

bash -c

如何从ngShow初始化中删除延迟？当ng-cloak失败？

3 个答案: