单个控制器角度js中的多个http请求

Question

我已经创建了不同的drupal 视图来为使用angular 的多个http 请求创建多个json 端点。在我的 Angular 脚本中，我为每个 http 请求创建了多个控制器，如下所示。但我想在单个控制器中执行多个 http 请求。我倾向于认为 $q 和 promises 或 factory 是前进的方向，但并不完全确定。任何帮助都感激不尽。谢谢

var module = angular.module('main',[]);
module.directive("masonry", function () {
    var NGREPEAT_SOURCE_RE = '<!-- ngRepeat: ((.*) in ((.*?)( track by (.*))?)) -->';
    return {
        compile: function(element, attrs) {
            // auto add animation to brick element
            var animation = attrs.ngAnimate || "'masonry'";
            var $brick = element.children();
            $brick.attr("ng-animate", animation);

            // generate item selector (exclude leaving items)
            var type = $brick.prop('tagName');
            var itemSelector = type+":not([class$='-leave-active'])";

            return function (scope, element, attrs) {
                var options = angular.extend({
                    itemSelector: itemSelector
                }, scope.$eval(attrs.masonry));

                // try to infer model from ngRepeat
                if (!options.model) {
                    var ngRepeatMatch = element.html().match(NGREPEAT_SOURCE_RE);
                    if (ngRepeatMatch) {
                        options.model = ngRepeatMatch[4];
                    }
                }

                // initial animation
                element.addClass('masonry');

                // Wait inside directives to render
                setTimeout(function () {
                    element.masonry(options);

                    element.on("$destroy", function () {
                        element.masonry('destroy')
                    });

                    if (options.model) {
                        scope.$apply(function() {
                            scope.$watchCollection(options.model, function (_new, _old) {
                                if(_new == _old) return;

                                // Wait inside directives to render
                                setTimeout(function () {
                                    element.masonry("reload");
                                });
                            });
                        });
                    }
                });
            };
        }
    };
});
angular.module('main',[]).controller('blogcontroller', function ($scope,$http) {
  $http.get('/blog-filter').success(function(result){
    $scope.blog = ( function () {
       return result.nodes;
    })();
  });
});


angular.module('cs',[]).controller('cscontroller', function ($scope,$http) {
  $http.get('/case-study-view').success(function(results){
    $scope.cs = ( function () {
      return results.nodes;
    })();
  });
});

Answer 1

创建一个包含所有 $http 服务的工厂，并像这样使用 $q：

(function(){
    app.factory('CountriesServices', countriesServices);
    countriesServices.$inject = ['$http', '$q', 'settings'];

function countriesServices($http, $q, settings) {
    var self = {};

    self.getCountries= function(){
        var deferred = $q.defer();
        var url = settings.baseService + 'api/country';

        $http.get(url)
            .success(deferred.resolve)
            .error(deferred.reject);

        return deferred.promise;
    };

    self.getCountry = function(id){
        var deferred = $q.defer();
        var url = settings.baseService + 'api/country/' + id;

        $http.get(url)
            .success(deferred.resolve)
            .error(deferred.reject);

        return deferred.promise;
    };



    return self;
}
})();

Answer 2

是的，您应该在工厂中使用 $http 方法：

angular
  .module('sharedServices')
  .factory('blogRepository', blogRepository);

blogRepository.$inject = ['$http', '$q'];

function blogRepository($http, $q) {
  var service = {
    getBlogFilter: getBlogFilter
  };

  return service;

  function getBlogFilter() {
    var deferred = $q.defer();
    $http.get('/blog-filter').success(function(result){
      deferred.resolve(result);
    });
    return deferred.promise;
  }
}

在你的控制器中：

blogRepository.getBlogFilter().then(function(data) {
  $scope.blog = data.nodes;
});

其他 $http 调用也类似。