javascript - AngularJS - 如何在使用 $resources 时保留 UI 状态

Question

在我的应用程序中，用户可以创建/删除项目。我使用 $resources，它就像一个魅力。但我想在请求进行时显示加载屏幕。

// show loading-screen
// ...

Item.destroy({'id': item.id}, function( response ){
  // handle success
  // ...

  // hide loading-screen
}, function( error ){
  // handle error 
  // ...

  // hide loading-screen
});

但是，我宁愿配置资源模块，而不是每次编写资源调用时显示/隐藏加载屏幕，这样每当资源加载数据时就会自动调用显示/隐藏加载屏幕。

有没有办法配置资源模块来实现这一点？

Answer 1

您可以使用$http.pendingRequests数组来查看是否有一些待处理的请求。

来自 Angular-Seed 项目的示例:https://github.com/rpeterson/angular-seed/blob/master/client/src/common/services/httpRequestTracker.coffee :

angular.module('services.httpRequestTracker', [])

.factory('httpRequestTracker', ['$http',
    function($http) {

        var httpRequestTracker = {};
        httpRequestTracker.hasPendingRequests = function() {
            return $http.pendingRequests.length > 0;
        };

        return httpRequestTracker;
    }
]);

然后您只需创建一个专用的加载指令，例如 ng-show="httpRequestTracker.hasPendingRequests"

请注意，使用此解决方案，您只知道是否有待处理的请求，而不知道是哪一个(如果您的页面上有多个 ajax 请求，这可能会很棘手)