ng-include要素が利用可能になるまで、ページの表示を非表示にするにはどうすればよいですか？

Question

私は、次のコードブロックを使用しています：

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

これは動作しますが、それは最初に全ての表示時に、それは私の場合にはシャドーボーダーである「ブロックボーダー」が表示されます。その後、しばらくすると内部の内容が表示されます。

私はそれを作ることができる方法はありますか？<DIV>は内部が含まれるまで表示されません準備ができていますか？

Answer 1

ヨngCloakを試してみてください：

ngCloakディレクティブが簡単にその中にブラウザに表示されてからの角度HTMLテンプレートを防ぐために使用されますアプリケーションがロードされている間は生の（コンパイルされていない）フォーム。このディレクティブを使用して、htmlテンプレートの表示によって引き起こされる望ましくないフリッカー効果を回避します。あなたのケースで

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

そう...：

<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

ng-includeディレクティブは、$includeContentLoadedイベントを発生させます。これを使用してブロック境界要素に配置されたng-show指示を制御する値を設定することができます。

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

Answer 3

使用この：

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