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 回答
1

The ng-include directive raises an $includeContentLoaded event. You could use that to set a value which in turn controls a ng-show directive placed on the block-border element.

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

于 2013-07-17T12:10:07.303 回答