{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 疯言疯语 的问题《How to remove delay from ngShow initialization? Wh》','https://www.manongdao.com/q-1299810.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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;
}
I know this has been answered, but I have another solution.
Using the bootstrap.css:
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.
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).
To make a
divhidden by default and prevent it from being shown before the page is completely loaded, you can addng-hidetoclassattribute. E.g.: