如何在 AngularJS 中的 2 个控制器之间交换 AJAX 数据

Question

我有 2 个控制器 (Products) 和 (ProductsFilters) 以及 1 个服务 (ProductService)。

2 个控制器同时加载，第二个控制器 (ProductsFilter) 充当第一个控制器 (Products) 的侧边菜单。

Products控制器通过ProductService调用AJAX服务，并将返回的数据赋值给ProductService中的一个变量（Facets）。

同时 ProductsFilter 从 ProductService 中检索（Facets）。

现在的问题是，我想在 ProductsFilter 控制器中处理一些数据，然后再将其显示在视图中，但是在执行时，ProductService.Facets 返回一个空对象，因为 AJAX 调用尚未完成！

我尝试 $watch() ProductService.Facets 但没有成功。

这里是产品服务

.factory('ProductService', function(AppService, CategoryService, $stateParams, $location, $http) {
return {
facets: {},
browse: function(category_id, page, order, order_type) {

  url = AppService.apiUrl() + 'products/browse.json?' + params;

  var that = this;

  return this.getProducts(url).then(function(response) {
    that.facets.grouped_brands = response.grouped_brands;
    that.facets.grouped_categories = response.grouped_categories;
    that.facets.grouped_prices = response.grouped_prices;
    that.facets.grouped_stores = response.grouped_stores;

    return response;
  });

},
getProducts: function(url) {
  return $http.jsonp(url + '&callback=JSON_CALLBACK&ref=mobile_app', {cache: true})
    .then(function(response) {
      if (typeof response.data === 'object') {
        return response.data;
      }
    });
   }
  }
 })

这是 Products 控制器：

.controller('ProductsController', function($scope, ProductService) {

  $scope.page = 1;

  $scope.moreProducts = function() {
    ProductService.browse(180, $scope.page)
      .then(function(products) {
        angular.extend($scope.products, products.products);
        $scope.page +=1;
      }
    );
  }

  $scope.products = {}

})

这里是 ProductsFilter 控制器：

.controller('ProductsFiltersController', function($scope, ProductService) {
  $scope.facets = ProductService.facets;
  $scope.brand_facets = []

  $scope.$watch('facets', function() {
    angular.forEach($scope.facets.grouped_brands, function(value, key) {
      $scope.brand_facets.push({brand: key, count: value})
    });
  });
})

Answer 1

您可以使用 angulars $broadcast 和 $on 功能来告诉第二个控制器何时收到 ajax 答案。

如何准确实现广播功能取决于您的控制器之间的关系。您可以将此 SO-answer 用作帮助：$scope.$emit and .$on angularJS

Answer 2

听起来您的服务中有一个异步错误。您要么需要让 AJAX 请求的回调将数据返回给控制器，要么使用 $q 创建一个 promise，然后将其返回给控制器。

https://docs.angularjs.org/api/ng/service/$q

$q 允许您创建延迟对象。因此，服务不会返回 null 对象，而是会返回一个承诺，一旦完成，您的控制器就可以采取行动。