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

Asked 29/5, 2015 at 22:38 Answered 23/12, 2015 at 11:16

Solved javascript angularjs angularjs-ng-show

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

enter image description here

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:

enter image description here

<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:

enter image description here

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;
}

Rippy answered 29/5, 2015 at 22:38 Comment(4)

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). – Berserker 29/5, 2015 at 23:54

Thanks yeah I was thinking that may be the way to go... using a toggle on ng-class instead. – Rippy 30/5, 2015 at 0:7

Do you want to post the answer? This worked :) used ng-class : .display-on { display: block !important; opacity: 1 !important; } – Rippy 30/5, 2015 at 1:54

Done, glad that worked for you! – Berserker 30/5, 2015 at 1:59

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

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

Berserker answered 30/5, 2015 at 1:58 Comment(0)

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.

Femoral answered 17/8, 2015 at 18:26 Comment(0)

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>

Beersheba answered 23/12, 2015 at 11:16 Comment(1)

this is the simplest and most efficient solution, it forces ng-hide until ng-show (eventually) evals to true – Damato 13/4, 2016 at 22:35

Recommended topics

Hot tags