频道导航

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

2020-05-29 Angularjs 前端之家

前端之家收集整理的这篇文章主要介绍了angularjs – 在ng-include元素可用之前,如何隐藏页面的显示？，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

我使用以下代码块：

<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>直到内部包含准备好后才显示？

@H_404_8@

你应该试试ngCloak：

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

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>