Opposite of ng-cloak for loading message

Question

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 looki

Answer 1

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

Answer 2

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

ng-show with no attribute specified compiles to false

Answer 3

You can use css to archive this behavior.

Create a class:

.splash {
  display: none;
}

[ng-cloak].splash {
  display: block !important;
}

And then add:

<div class="splash" ng-cloak> Loading... </div>

This will show before the Angular code loads, and will hide after the angular code completes. Don't forget to wrap your angular code with ng-cloak too.

<div ng-cloak> Your code... </div>