restangular：是有可能有一个进度条？ [英] restangular: is it possible to have a progress bar ?

问题描述

根据restangular我有这个code（在服务）（它的工作原理）：

I have this code (in a service) based on restangular (it works):

sendFile: function (params) {
                console.log('sendFile');
                console.log(params);
                return this.restfulBase().post('file.json',params,{},{ 'X-CSRF-Token' : ipCookie('csrftoken')});
            }

我如何，在我的控制器/指令，得到这个上传进度只能使用Restangular的？我已阅读，我可以编写直接使用XHR或jQuery插件一样的FileUpload我的上传功能，但我想只使用restangular让我的用户不加载无用的js文件。

How can I, in my controller/directive, get the progress of this upload only with use of Restangular ? I have read that I can write my upload function that use directly XHR or a jQuery plugin like FileUpload, but i want to use only restangular so that my user don't load useless js files.

或者是有上传时开始拦截的可能性？这样，我可以写一个div正在加载...（好吧，这是不好的像一个进度条，有总比没有好）。

Or is there a possibility to intercept when upload start ? In this way I can write a div "Loading..." (ok, it is not good like a progress bar, is better than nothing).

感谢。

推荐答案

下面是我的解决方案来创建一个Restangular animationd期间API请求。

Here is my solution to create a Restangular animationd during api requests.

首先添加的响应拦截并发出了一个rootscope广播的请求拦截器。然后创建一个指令来侦听响应和请求：

First add a response interceptor and a request interceptor that sends out a rootscope broadcast. Then create a directive to listen for that response and request.:

         angular.module('mean.system')
  .factory('myRestangular',['Restangular','$rootScope', function(Restangular,$rootScope) {
    return Restangular.withConfig(function(RestangularConfigurer) {
      RestangularConfigurer.setBaseUrl('http://localhost:3000/api');
      RestangularConfigurer.addResponseInterceptor(function(data, operation, what, url, response, deferred) {
        var extractedData;
        // .. to look for getList operations
        if (operation === 'getList') {
          // .. and handle the data and meta data
          extractedData = data.data;
          extractedData.meta = data.meta;
        } else {
          extractedData = data.data;
        }
        $rootScope.$broadcast('apiResponse');
        return extractedData;
      });
      RestangularConfigurer.setRequestInterceptor(function (elem, operation) {
        if (operation === 'remove') {
          return null;
        }
        return (elem && angular.isObject(elem.data)) ? elem : {data: elem};
      });
      RestangularConfigurer.setRestangularFields({
        id: '_id'
      });
      RestangularConfigurer.addRequestInterceptor(function(element, operation, what, url) {
        $rootScope.$broadcast('apiRequest');
        return element;
      });
    });
  }]);

下面是指令：

        angular.module('mean.system')
  .directive('smartLoadingIndicator', function($rootScope) {
    return {
      restrict: 'AE',
      template: '<div ng-show="isAPICalling"><p><i class="fa fa-gear fa-4x fa-spin"></i>&nbsp;Loading</p></div>',
      replace: true,
      link: function(scope, elem, attrs) {
        scope.isAPICalling = false;

        $rootScope.$on('apiRequest', function() {
          scope.isAPICalling = true;
        });
        $rootScope.$on('apiResponse', function() {
          scope.isAPICalling = false;
        });
      }
    };
  })
;

这篇关于restangular：是有可能有一个进度条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！