0

My page has header, content and footer.

<div id='header'></div>
<div data-ng-view=""></div>
<div id='footer'></div>

I have binding in header section, how can I delay header view rendering until model loaded to prevent flicker ? I do not want the user to see this while ajax data is loading.

enter image description here

I have checked this post, it only will works for the ng-view.

My page header and footer are part of the master page, they are not governed by $routeprovider

Community
  • 1
  • 1
nandin
  • 2,549
  • 5
  • 23
  • 27

2 Answers2

0

Try adding a conditional attribute in the header tag.

<div id="header" ng-show="model_name"></div>
Rob
  • 1,840
  • 2
  • 12
  • 19
0

Try ng-cloak. It will hide the page until angularJS is ready.

Alex C
  • 1,334
  • 2
  • 18
  • 41
  • I have ng-cloak on the out most div, it does not work `
    `     – nandin Jul 18 '14 at 12:02
  • For the head, I use directives personally, ng-cloak works only on the elements of the body. https://docs.angularjs.org/api/ng/directive/ngCloak – Alex C Jul 18 '14 at 12:09
  • wrap header into a directive is a good idea. I will let you know the result. thank you! – nandin Jul 18 '14 at 12:43
  • if html dom is big, ng-cloak will not work. I have found the answer in this blog post http://weblog.west-wind.com/posts/2014/Jun/02/AngularJs-ngcloak-Problems-on-large-Pages – nandin Jul 21 '14 at 14:30