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

我有2个控制器（产品）和（产品过滤器）以及1个服务（产品服务）

两个控制器同时加载，第二个控制器（ProductsFilter）作为第一个控制器（Products）的侧菜单

Products controller通过ProductService调用AJAX服务，并将返回的数据分配给ProductService中的变量（Facets）

同时，ProductsFilter从ProductService检索（facet）

现在的问题是，我想在视图中显示ProductsFilter controller中的一些数据之前处理这些数据，但在执行时，ProductService.Facets返回一个空对象，因为AJAX调用尚未完成

我试图$watch（）产品服务。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;
      }
    });
   }
  }
 })

以下是产品控制器：

.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 = {}

})

.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})
    });
  });
})

这是ProductsFilter控制器：

.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 = {}

})

.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})
    });
  });
})

---

听起来您的服务中有一个异步错误。您需要让AJAX请求的回调将数据返回给控制器，或者使用$q创建一个承诺，该承诺将返回给控制器

$q

---

$q允许您创建延迟对象。因此，服务不会返回null对象，而是返回一个承诺，即一旦实现，控制器就可以执行该承诺

您可以使用angulars

$broadcast

和

$on

功能告知第二个控制器何时收到ajax应答

---

如何准确实现广播功能取决于控制器之间的关系。您可以使用此答案作为帮助：

您能更具体地说明它是如何工作的吗？您还可以提供您尝试使用的

$watch

的代码示例吗？您的

$watch

代码是什么？我建议您在AJAX回调方法中使用

$broadcast

和

$on

。您能至少在

产品服务中发布一些示例代码吗logic@MarcKline，谢谢你的回复，我添加了代码samples@guru，谢谢您的回复，我添加了代码示例我认为这种方法的一个问题是，一个控制器调用服务方法，但另一个控制器在没有得到通知的情况下不会知道它，因此您需要一个延迟消息以及一些类似
$watch
的信号。另外，假设可以多次调用它，您需要创建和处理多个延迟的，因为我相信每个延迟只处理一个解析。我尝试了$rootScope。$broadcast，但它不起作用！我在服务中使用了$rootScope.$emit（），在控制器上使用了$rootScope.on（），效果很好。