Question

我正在尝试制作一个将在每个页面上显示的加载程序，并在加载所有内容时淡出。到目前为止，这是我的代码：

<div id="loader-wrapper" data-loader-drct data-ng-hide="hidden">
        <div id="loader"></div>

        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
</div><!--end loader-wrapper-->

app.directive('loaderDrct', [function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {

                scope.$on('$routeChangeSuccess', function () {
                    var hide = false;
                    scope.hidden = hide;

                    scope.$on('$viewContentLoaded', function () {
                        hide = true;
                        scope.hidden = hide;
                    });
                });
            }
        }
}]);

当我执行此代码时，加载器正在隐藏（添加了一些CSS），但是当我转到另一个页面时，加载器不会再次显示。 ng-hide类仍然存在，这意味着该指令已经执行，并且在转到新页面后没有刷新。

如何在每个页面上显示和隐藏装载程序？

Answer 1

好吧，我找到了迈克尔提出的解决方案。问题是模板已加载，浏览器没有时间使更改可见。你可以在这里找到完整的答案：Angular js - show/hide loading gif every new route

Answer 2

上传/下载文件时加载

添加 index.html

<div id="loading_wrapper">
    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>

并添加 controller.js

var $loadingWrapper = angular.element('#loading_wrapper');

注意：确保是否安装了font-awesome css文件。否则，您可以使用简单的引导程序组件。

AngularJS在每个页面上显示加载器

2 个答案: