Question

我制作的工具有2~5秒的负载，具体取决于页面＆amp;服务器。我想创建一个指令，该指令将在每个路由更改和fadeout 显示页面完全呈现后显示。

堆栈：

Yeoman，Grunt，Bower，jQuery，Angular，＆amp;火力

指令

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

        link:function ($scope) {

          }
      };
  });

CSS

.overlay-jordan {
  opacity: 1;
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background: url(../images/jordan-overlay.png) no-repeat center center;
  background-size: cover;
  z-index: 99999;
}

Answer 1

我忘记了我找到这段代码的地方，但对我来说很有用。

您可以interceptors上的$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();
                });
            }
        };
    }])

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

即可

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

用作加载屏幕的指令

1 个答案: