Come posso nascondere la visualizzazione di una pagina finché non sono disponibili gli elementi di inclusione di ng?

Question

Sto usando il seguente blocco di codice:

<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> 

Questo funziona, ma quando si mostra prima di tutto viene visualizzato un "blocco-border", che nel mio caso è un confine ombra. Quindi, dopo un breve periodo di tempo, viene visualizzato il contenuto interno.

C'è un modo per farlo in modo che l'esterno <DIV> non venga visualizzato fino a quando gli interni inclusi non sono pronti?

Answer 1

Yo dovrebbe cercare ngCloak:

La direttiva ngCloak è usato per prevenire il modello HTML angolare venga visualizzato brevemente dal browser nella sua modulo (non compilato) non elaborato durante il caricamento dell'applicazione. Utilizzare questa direttiva per evitare l'effetto sfarfallio indesiderato causato dalla visualizzazione del template html.

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

così ... nel tuo caso:

<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> 

Answer 2

La direttiva ng-include genera un evento $includeContentLoaded. Potresti usarlo per impostare un valore che a sua volta controlla una direttiva ng-show posizionata sull'elemento block-border.

https://github.com/angular/angular.js/blob/master/src/ng/directive/ngInclude.js#L178

Answer 3

Utilizzare questa:

HTML

<div data-ng-controller="AdminGridContentController"> 
    <ng-include src="'/Content/app/admin/partials/grid-content-base.html'" ng-show="isLoaded"></ng-include> 
    <ng-include src="'/Content/app/admin/partials/table-content.html'" ng-show="isLoaded"></ng-include> 
    <ng-include src="'/Content/app/admin/partials/modal-content.html'" ng-show="isLoaded"></ng-include> 
</div> 

Javascript

yourApp.controller('AppController', ['$rootScope', function ($scope, $rootScope,) { 
    $scope.isLoaded = false; 
    $rootScope.$on('$includeContentLoaded', function(event) { 
     $scope.isLoaded = true; 
    }); 
}]); 

Referenc es

• ng-show
• ng-include