0

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;
}
Community
  • 1
  • 1
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
  • 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). – Jesse Kernaghan May 29 '15 at 23:54
  • Thanks yeah I was thinking that may be the way to go... using a toggle on `ng-class` instead. – Leon Gaban May 30 '15 at 00:07
  • Do you want to post the answer? This worked :) used `ng-class` : `.display-on { display: block !important; opacity: 1 !important; }` – Leon Gaban May 30 '15 at 01:54
  • Done, glad that worked for you! – Jesse Kernaghan May 30 '15 at 01:59

3 Answers3

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}"
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
Jesse Kernaghan
  • 4,544
  • 2
  • 18
  • 25
1

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.

iGanja
  • 2,374
  • 2
  • 28
  • 32
1

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>
Damir Arh
  • 17,637
  • 2
  • 45
  • 83
  • this is the simplest and most efficient solution, it forces ng-hide until ng-show (eventually) evals to true – 96khz Apr 13 '16 at 22:35