7

次のコード ブロックを使用しています。

<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>内側のインクルードの準備ができるまで外側が表示されないようにする方法はありますか?

4

3 に答える 3

7

試してみてくださいngCloak：

ngCloak ディレクティブは、アプリケーションのロード中に Angular 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>
于 2013-07-17T13:06:10.120 に答える
6

これを使って：

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;
    });
}]);

参考文献

于 2013-07-17T13:01:29.107 に答える