Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Opposite of ng-cloak for loading message

I don't know if this exists in the AngularJS framework, but essentially I'm looking for the opposite of ng-cloak, which hides elements until the page is compiled. I was looking for a way to show a full screen loading message until the page is compiled. Is there something built into the language to handle this?

like image 217
helios456 Avatar asked Feb 26 '14 20:02

helios456


2 Answers

I have resolved this using a somewhat hacky method as follows. The following HTML is added at the end of the main page.

<div ng-show="::false" style="position: fixed; height: 100%; width: 100%; background-color: #353535; top: 0; left: 0; z-index: 10000;">     <div style="display: table; margin: 0 auto; font-size: 26px; color: #CCC;">         Loading     </div> </div> 

The message is shown across the entire browser until the page is compiled, at which point ng-show takes over and hides the loading message.

EDIT: Angular 1.3+ lets you use the :: expression to prevent evaluating the expression in every digest cycle. https://docs.angularjs.org/guide/expression#one-time-binding

like image 173
helios456 Avatar answered Oct 03 '22 11:10

helios456


<div ng-show>Loading Results...</div> 

ng-show with no attribute specified compiles to false

like image 23
Code Whisperer Avatar answered Oct 03 '22 12:10

Code Whisperer