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>

这样可行，但是当它首先显示时，它会显示一个＆＃34; block-border＆＃34;在我的情况下是阴影边框。然后在短时间内显示内部内容。

有没有办法可以实现，所以外部<DIV>在内部包含准备好之前不显示？

Answer 1

哟应该尝试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>

Answer 2

使用此：

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

参考

Answer 3

ng-include指令引发$includeContentLoaded事件。您可以使用它来设置一个值，该值又控制放置在块边框元素上的ng-show指令。

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

在ng-include元素可用之前，如何隐藏页面的显示？

3 个答案: