Javascript 用作加载屏幕的指令

我正在制作一个加载时间为2~5秒的工具，具体取决于页面和服务器。我想创建一个指令，在页面完全呈现后，该指令将在每次路由更改和淡出时显示

堆栈：

约曼、格伦特、鲍尔、jQuery、Angular和Firebase

指令

app.directive('overlay', function() {
    return {
        restrict: 'E',
        template: '<div class="overlay-jordan"></div>',

        link:function ($scope) {

          }
      };
  });

---

我忘了在哪里找到这段代码，但它对我来说很有用

您可以使用

$httpProvider

上的

拦截器执行此操作

angular.module("app", [])
    .constant('_START_REQUEST_', '_START_REQUEST_')
    .constant('_END_REQUEST_', '_END_REQUEST_')
    .config(['$httpProvider', '_START_REQUEST_', '_END_REQUEST_', function ($httpProvider, _START_REQUEST_, _END_REQUEST_) {
        var $http,
            interceptor = ['$q', '$injector', function ($q, $injector) {
                var rootScope, location;

                function success(response) {
                    // get $http via $injector because of circular dependency problem
                    $http = $http || $injector.get('$http');
                    // don't send notification until all requests are complete
                    if ($http.pendingRequests.length < 1) {
                        // get $rootScope via $injector because of circular dependency problem
                        rootScope = rootScope || $injector.get('$rootScope');
                        // send a notification requests are complete
                        rootScope.$broadcast(_END_REQUEST_);
                    }
                    return response;
                }

                function error(response) {
                    // get $http via $injector because of circular dependency problem
                    $http = $http || $injector.get('$http');
                    // don't send notification until all requests are complete
                    if ($http.pendingRequests.length < 1) {
                        // get $rootScope via $injector because of circular dependency problem
                        rootScope = rootScope || $injector.get('$rootScope');
                        // send a notification requests are complete
                        rootScope.$broadcast(_END_REQUEST_);
                    }
                    return $q.reject(response);
                }

                return function (promise) {
                    // get $rootScope via $injector because of circular dependency problem
                    rootScope = rootScope || $injector.get('$rootScope');
                    // send notification a request has started
                    rootScope.$broadcast(_START_REQUEST_);
                    return promise.then(success, error);
                }
            }];

        $httpProvider.responseInterceptors.push(interceptor);
    }])
    // Loading directive
    .directive('loadingWidget', ['_START_REQUEST_', '_END_REQUEST_', function (_START_REQUEST_, _END_REQUEST_) {
        return {
            restrict: "A",
            link: function (scope, element) {
                // hide the element initially
                element.hide();

                scope.$on(_START_REQUEST_, function () {
                    // got the request start notification, show the element
                    element.show();
                });

                scope.$on(_END_REQUEST_, function () {
                    // got the request end notification, hide the element
                    element.hide();
                });
            }
        };
    }])

角度模块（“应用程序”，[]）
.常量（“启动请求”、“启动请求”）
.常量（“结束请求”、“结束请求”）
.config（['$httpProvider'、''u START\'u REQUEST\'u'、''u END\'u REQUEST\'u'，函数（$httpProvider、'u START\'u REQUEST\'u、'u END\'u REQUEST\'u）{
var$http，
拦截器=['$q'，'$injector'，函数（$q，$injector）{
var根镜、位置；
功能成功（响应）{
//由于循环依赖性问题，通过$injector获取$http
$http=$http | |$injector.get（“$http”）；
//在所有请求完成之前不要发送通知
如果（$http.pendingRequests.length<1）{
//由于循环依赖性问题，通过$injector获取$rootScope
rootScope=rootScope | |$injector.get（“$rootScope”）；
//发送通知请求已完成
rootScope.$broadcast（\u END\u REQUEST\u）；
}
返回响应；
}
功能错误（响应）{
//由于循环依赖性问题，通过$injector获取$http
$http=$http | |$injector.get（“$http”）；
//在所有请求完成之前不要发送通知
如果（$http.pendingRequests.length<1）{
//由于循环依赖性问题，通过$injector获取$rootScope
rootScope=rootScope | |$injector.get（“$rootScope”）；
//发送通知请求已完成
rootScope.$broadcast（\u END\u REQUEST\u）；
}
返回$q.reject（响应）；
}
返回函数（承诺）{
//由于循环依赖性问题，通过$injector获取$rootScope
rootScope=rootScope | |$injector.get（“$rootScope”）；
//发送通知请求已启动
rootScope.$broadcast（\u START\u REQUEST\u）；
回报承诺。然后（成功，错误）；
}
}];
$httpProvider.responseInterceptors.push（拦截器）；
}])
//加载指令
.directive（'loadingWidget'、[''u START\u REQUEST\u'、''u END\u REQUEST\u'，函数（'u START\u REQUEST\u，'u END\u REQUEST\u）{
返回{
限制：“A”，
链接：功能（范围、元素）{
//最初隐藏元素
元素。隐藏（）；
作用域：$on（\u启动\u请求，\u函数（）{
//获取请求开始通知，显示元素
元素show（）；
});
作用域.$on（\u结束\u请求，\u函数（）{
//获取请求结束通知，隐藏元素
元素。隐藏（）；
});
}
};
}])

在主html页面中，只需声明加载内容

<div id="loadingWidget" loading-widget>
    <div class="loadingContent">
        <p>
            Loading ...
        </p>
    </div>
</div>

加载。。。

<div id="loadingWidget" loading-widget>
    <div class="loadingContent">
        <p>
            Loading ...
        </p>
    </div>
</div>