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

问题

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>

来源：https://stackoverflow.com/questions/30540119/how-to-remove-delay-from-ngshow-initialization-when-ng-cloak-fails

标签

javascript

angularjs

angularjs-ng-show