How to remove delay from ngShow initialization? Wh

I've run into the exact same problem found in this question. However both answers did not work in my case.

Video of my problem: https://www.youtube.com/watch?v=ByjmwmamemM

When my app loads, there are several popovers with ng-show checks on all of them. They all start out false however for 3-4 secs (long time) the popovers show up, then disappear.

According to the answer in the question I linked to above I should try to load Angular at the top in the head section, and if that doesn't work then add .ng-cloak to my CSS and to the divs in question.

Both did not work :(

Anyone else run into this problem before?

Index.html:

<body ng-app="tickertags">

    <div ui-view></div>

dashboard.html <- first template loaded into 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>

The popovers:

searchPopover: (3-4 secs before hiding)

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

tagSearchPopover: (3-4 secs before hiding)

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

tagFilterPopover: (<- this popover disappears the fastest, .5 sec)

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

ng-cloak

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

回答1:

Hide them by default in css, then override when angular loads. The 3-4 second delay could be the time it's taking to fetch and load angular amidst all the other requests you're making (you should check your network panel).

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

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

回答2:

I know this has been answered, but I have another solution.

Using the bootstrap.css:

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

This will remove the collapse class if required, but it will start off as hidden until angular can evaluate it.

Otherwise use any class that sets display:none, and remove it with ng-class.

回答3:

To make a div hidden by default and prevent it from being shown before the page is completely loaded, you can add ng-hide to class attribute. E.g.:

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