How can I hide the display of a page until the ng-include elements are available?

angularjs

Solution

Yo should try `ngCloak`:

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

http://docs.angularjs.org/api/ng.directive:ngCloak

so... in your case:

<section id="content">
    <div class="block-border">
        <div data-ng-controller="AdminGridContentController" ng-cloak>
            <ng-include src="'/Content/app/admin/partials/grid-content-base.html'"></ng-include>
            <ng-include src="'/Content/app/admin/partials/table-content.html'"></ng-include>
            <ng-include src="'/Content/app/admin/partials/modal-content.html'"></ng-include>
        </div>
    </div>
</section>

Problem

I am using the following code block: ``` <section id="content"> <div class="block-border"> <div data-ng-controller="AdminGridContentController"> <ng-include src="'/Content/app/admin/partials/grid-content-base.html'"></ng-include> <ng-include src="'/Content/app/admin/partials/table-content.html'"></ng-include> <ng-include src="'/Content/app/admin/partials/modal-content.html'"></ng-include> </div> </div> </section> ``` This works but when it displays first of all it displays a "block-border" which in my case is a shadow border. Then after a short time the inside contents display. Is there a way I can make it so the outer `<DIV>` does not show until the inside includes are ready?

Original source