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

AngularJS - How to retain UI state when using $resources

本文关键字：保留 UI 状态 resources      更新时间：2023-09-26

在我的应用中，用户可以创建/删除项目。我使用$resources，它非常有效。但是我想在请求正在进行时显示一个加载屏幕。

// show loading-screen
// ...
Item.destroy({'id': item.id}, function( response ){
  // handle success
  // ...
  // hide loading-screen
}, function( error ){
  // handle error 
  // ...
  // hide loading-screen
});

但是，与其每次编写资源调用时显示/隐藏加载屏幕，我更愿意配置资源模块，以便在资源加载数据时自动调用显示/隐藏加载屏幕。

是否有办法配置资源模块来实现这一点?

您可以使用$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请求，可能会很棘手)

相关文章：