21

$httpユーザーがクリックしたときにリクエストを行い、リクエストがまたはのいずれか<button>で返されるまで、画面上のいくつかの要素を無効/非表示/表示しますsuccesserror

$httpまだ返信がないことを知る方法はありますか？私が今やっている方法は、コントローラーにvarがあり、$scope.requestingそれをHTMLページで次のように使用することです。

<img src="img/loader.gif" ng-show="requesting" />

基本的に$scope.requestingが true の場合、回転する ajaxyish ローダーを表示します。

$scope.requesting可能であればを捨てて、提供されているものは何でも使用したいと思い$httpます。

ログイン コントローラ

function LoginForm($scope, $http)
{
    $scope.requesting = false;

    $scope.login = function()
    {
        $scope.requesting = true;

        $http.post('resources/request.php', data, {timeout:20000})
            .success(function(data, status, headers, config)
            {
                $scope.requesting = false;
            })
            .error(function(data, status, headers, config)
            {
                $scope.requesting = false;
            }
        );
    }
}
4

4 に答える 4

33

$http.pendingRequests現在保留中のリクエストに対して、構成オブジェクトの配列を利用できます。そのように使用することが可能です：

$scope.isLoading = function () {
   return $http.pendingRequests.length !== 0;
};
于 2013-03-20T17:05:10.777 に答える
1

このjsbin プロジェクトは、@DmitryEvseev の回答を次のステップに進めます。「読み込み中...」のトリガーに使用できるリクエストをより細かく制御できます。

これらのリクエストは{ showLoader: true }、'loading...' パネルを表示するために使用されます。

HTML

  <div ng-app="app">
    <div ng-controller="spinnerController as vm">
      <div ng-if="vm.isLoading()">Loading ...</div>
    </div>
  </div>

Javascript

angular
  .module('app', [])
  .config(config)
  .factory('httpLoader', httpLoader)
  .factory('httpLoaderInterceptor', httpLoaderInterceptor)
  .controller('spinnerController', spinnerController);

function config($httpProvider) {
  //adding the default http status code handler
  $httpProvider.interceptors.push('httpLoaderInterceptor');
}

function httpLoader() {
  var pendingReqs = {};
  var factory = {
    addPendingReq: addPendingReq,
    subtractPendingReq: subtractPendingReq,
    getPendingReqs: getPendingReqs
  };
  return factory;

  function addPendingReq(url) {
    console.log('adding url', url);
    pendingReqs[url] = true;
  }

  function subtractPendingReq(url) {

    console.log('removing url', url);
    delete pendingReqs[url];
  }

  function getPendingReqs() {
    return sizeOf(pendingReqs);
  }
}

function httpLoaderInterceptor($q, httpLoader) {

  var factory = {
    request: request,
    response: response,
    responseError: responseError
  };

  return factory;

  function request(config) {
    console.log('request', config.url);
    if (config.showLoader) {
      httpLoader.addPendingReq(config.url);
    }
    return config;
  }

  function response(res) {
    console.log('response', res.config.url);
    if (res.config.showLoader) {
      httpLoader.subtractPendingReq(res.config.url);
    }
  }

  function responseError(res) {
    console.log('responseError', res.config.url);
    if (res.config.showLoader) {
      httpLoader.subtractPendingReq(res.config.url);
    }
    return $q.reject(res);
  }
}

function spinnerController($http, httpLoader) {
  var self = this;
  self.isLoading = function() {
    return httpLoader.getPendingReqs() > 0;
  };

  $http.get('http://stackoverflow.com/posts/34561385',{
    showLoader: true
  });
  $http.get('http://www.amazon.com', {
    showLoader: true
  });
  $http.get('http://www.yahoo.com',{
    showLoader: true
  });
  $http.get('http://www.stackoverflow.com',{
    showLoader: true
  });
}

function sizeOf(obj) {
  var size = 0,
    key;
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      size++;
    }
  }
  return size;
}
于 2016-01-02T02:14:33.193 に答える