1

我已经使用 transformRequest 和 responseInterceptors 设置了一个 ajax 微调器，如下所示 http://jsfiddle.net/zdam/dBR2r/

    angular.module('SharedServices', [])
    .config(function ($httpProvider) {
        $httpProvider.responseInterceptors.push('myHttpInterceptor');
        var spinnerFunction = function (data, headersGetter) {
            // todo start the spinner here

            alert('start spinner');
            return data;
        };
        $httpProvider.defaults.transformRequest.push(spinnerFunction);
    })
// register the interceptor as a service, intercepts ALL angular ajax http calls
    .factory('myHttpInterceptor', function ($q, $window) {
        return function (promise) {
            return promise.then(function (response) {
                // do something on success
                // todo hide the spinner
                alert('stop spinner');
                return response;

            }, function (response) {
                // do something on error
                // todo hide the spinner
                alert('stop spinner');
                return $q.reject(response);
            });
        };
    })

angular.module('project', ['mongolab', 'SharedServices']).
  config(function($routeProvider) {
    $routeProvider.
      when('/list', {controller:ListCtrl, template:'list.html'}).
      when('/edit/:projectId', {controller:EditCtrl, template:'detail.html'}).
      when('/new', {controller:CreateCtrl, template:'detail.html'}).
      otherwise({redirectTo:'/list'});
  });


function ListCtrl($scope, Project) {
  $scope.projects = Project.query();
}


function CreateCtrl($scope, $location, Project) {
  $scope.save = function() {
    Project.save($scope.project, function(project) {
      $location.path('/edit/' + project._id.$oid);
    });
  }
}


function EditCtrl($scope, $location, $routeParams, Project) {
  var self = this;

  Project.get({id: $routeParams.projectId}, function(project) {
    self.original = project;
    $scope.project = new Project(self.original);
  });

  $scope.isClean = function() {
    return angular.equals(self.original, $scope.project);
  }

  $scope.destroy = function() {
    self.original.destroy(function() {
      $location.path('/list');
    });
  };

  $scope.save = function() {
    $scope.project.update(function() {
      $location.path('/list');
    });
  };
}

// This is a module for cloud persistance in mongolab - https://mongolab.com
angular.module('mongolab', ['ngResource']).
    factory('Project', function($resource) {
      var Project = $resource('https://api.mongolab.com/api/1/databases' +
          '/angularjs/collections/projects/:id',
          { apiKey: '4f847ad3e4b08a2eed5f3b54' }, {
            update: { method: 'PUT' }
          }
      );

      Project.prototype.update = function(cb) {
        return Project.update({id: this._id.$oid},
            angular.extend({}, this, {_id:undefined}), cb);
      };

      Project.prototype.destroy = function(cb) {
        return Project.remove({id: this._id.$oid}, cb);
      };

      return Project;
    });

但我不会为一些 ajax 调用停止/隐藏 ajax 微调器。就像自动完成 ajax 调用一样。

有没有办法做到这一点？谢谢

4

1 回答 1

1

我从 angularjs google grops 找到了一个解决方案，

https://groups.google.com/d/msg/angular/K8F_6K1C_GI/cOOEJPQC79cJ

正如詹姆斯摩根在那里所说，在 $rootScope 中放置一个标志并在显示微调器之前检查它。

angular.module('SharedServices', [])
.config(function ($httpProvider) {
    $httpProvider.responseInterceptors.push('myHttpInterceptor');
    var spinnerFunction = function (data, headersGetter) {
        // todo start the spinner here
        // check $rootScope flag
        rootscope = angular.element(document).injector().get('$rootScope');
        if(rootscope.spinner == null || rootscope.spinner != false)
           alert('start spinner');
        else
           rootscope.spinner = true; // reset for other requests

        return data;
    };
    $httpProvider.defaults.transformRequest.push(spinnerFunction);
})

希望这对其他人有帮助。

于 2013-03-16T06:14:56.540 回答