如何在AngularJS 2控制器之间交换数据的AJAX [英] How to exchange AJAX data between 2 controllers in AngularJS

问题描述

我有2个控制器（产品）和（ProductsFilters）和1个服务（ProductService）。

的2个控制器是在作为第2一（ProductsFilter）充当第一控制器（产品）的侧菜单的同时被装载。

产品控制器通过ProductService AJAX调用服务，返回的数据分配给ProductService一个变量（构面）。

在同一时间的ProductsFilter从ProductService检索（构面）。

现在的问题，我想以处理ProductsFilter控制器中的一些数据之前，越来越显示它的看法，但在执行的时候，因为AJAX呼叫尚未完成的ProductService.Facets返回一个空的对象！

我试图$腕表（）的ProductService.Facets，但没有奏效。

下面是产品服务

  .factory（'ProductService'，函数（AppService服务，CategoryService，$ stateParams，$位置$ HTTP）{
返回{
面：{}，
浏览：功能（CATEGORY_ID，页面顺序，ORDER_TYPE）{  URL = AppService.apiUrl（）+'产品/ browse.json？ +参数;  VAR认为这=;  返回this.getProducts（URL）。然后（功能（响应）{
    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;    返回响应;
  }）;}，
的getProducts：功能（URL）{
  返回$ http.jsonp（网址+'和;回调= JSON_CALLBACK＆安培; REF = mobile_app'，{缓存：真}）
    。然后（功能（响应）{
      如果（typeof运算response.data ==='对象'）{
        返回response.data;
      }
    }）;
   }
  }
 }）
 

下面是产品控制器：

  .controller（'的ProductsController'，函数（$范围，ProductService）{  $ scope.page = 1;  $ scope.moreProducts =功能（）{
    ProductService.browse（180，$ scope.page）
      。然后（功能（产品）{
        angular.extend（$ scope.products，产品。产品）;
        $ scope.page + = 1;
      }
    ）;
  }  $ scope.products = {}}）
 

这里是ProductsFilter控制器：

  .controller（'ProductsFiltersController'，函数（$范围，ProductService）{
  $ scope.facets = ProductService.facets;
  $ scope.brand_facets = []  $范围。$腕表（'面'，函数（）{
    angular.forEach（$ scope.facets.grouped_brands，功能（值，键）{
      $ scope.brand_facets.push（{品牌：键，数：值}）
    }）;
  }）;
}）
 

解决方案

您可以使用angulars $广播和 $关于功能来告诉第二个控制器时，阿贾克斯的答案是收到。

如何准确地实现广播功能取决于控制器之间的关系。您可以使用此SO-答案帮助：。 $ $范围，并发出关于$ angularJS

I have 2 controllers (Products) and (ProductsFilters) and 1 service (ProductService).

The 2 controllers are being loaded at the same time as the 2nd one (ProductsFilter) acts as a side menu for the first controller (Products).

Products controller calls AJAX service through ProductService and assign the returned data to a variable(Facets) in ProductService.

At same time the the ProductsFilter retrieve the (Facets) from ProductService.

The problem now, that I want to process some data in ProductsFilter controller before it is getting displayed in the view, but at the time of execution, the ProductService.Facets return an empty object because the AJAX call has not been finished yet!

I tried to $watch() the ProductService.Facets but it didn't work.

Here is the product service

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

Here is the Products controller:

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

})

And here is the ProductsFilter controller:

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

解决方案

You can use angulars $broadcast and $on functionality to tell the second controller when the ajax answer is recieved.

How to exactly implement the broadcast feature depends on the relation between your controllers. You can use this SO-answer as help: $scope.$emit and .$on angularJS

这篇关于如何在AngularJS 2控制器之间交换数据的AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！