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

【问题标题】：AngularJS show loader on every pageAngularJS 在每个页面上显示加载器
【发布时间】：2015-11-01 13:03:29
【问题描述】：

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

<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 类还在，说明这个指令已经执行过了，进入新页面后没有刷新。

如何让加载器在每个页面上显示和隐藏？

【问题讨论】：

尝试在页面的控制器中移动隐藏代码，并在指令中指定模板 HTML。

标签： angularjs

【解决方案1】：

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

【讨论】：

【解决方案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 文件。否则，您可以简单地使用引导组件。

【讨论】：