Question

我有一个ProductService，可以获取数据并提供给ProductsController。这是代码。

sampleApp.factory('ProductService', ['$http', function ($http){
    var req = {
        method: 'POST',
        url: 'ProductData.txt',
        //url: 'http://localhost/cgi-bin/superCategory.pl',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }//,
        //data: { action: 'GET' }
    };  

    return {
        GetProducts: function () {
            return $http(req);
        },
        GetDetailInfo: function (ProductID) {
            // HOW TO IMPLEMENT THIS
        }
    };
}]);



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

    $scope.Products = [];

    $scope.GetProducts = function() {
        ProductService.GetProducts().then(
            function(response) {
                if (response.data !== undefined) {
                    //alert (response.data);
                    console.log(response.data);
                    $scope.Products = response.data;
                }
                else  {
                    alert ('undefined data');
                }
            },
            function(Error) {
                alert ('error worng');
            }
        );
    };

    $scope.GetProducts();
});

现在我想在服务中再实现一个功能，提供有关产品的详细信息。但由于$ scope.Products在ProductService中不可用，我无法循环并获取所需ProductID的数据。

我想在ProductService中实现该功能，而不是在ProductsController中，因为其他一些服务（需要产品数据）将使用此ProductService。

如何解决这个问题？

如果有更好的架构来实现同样的目标，那也是受欢迎的。

Answer 1

您需要重写服务中的GetProducts以将产品数据存储在服务中。

而不是返回$http(req)，解决服务中的承诺。

在成功回调中，通过在服务中声明变量来将响应数据存储在服务中。然后将承诺返回给控制器。

这可以解决您的问题。

示例代码：

sampleApp.factory('ProductService', ['$http', '$q', function ($http, $q){
    var req = {
        method: 'POST',
        url: 'ProductData.txt',
        //url: 'http://localhost/cgi-bin/superCategory.pl',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }//,
        //data: { action: 'GET' }
    };  
    var productService =  {};
    productService.products = [];
    return {
        GetProducts: function () {
            var defer = $q.defer();
            $http(req).then(function(response) {
                productService.products = response.data;
                defer.resolve(productService.products);
            }, function(error) {
                defer.reject("Some error");
            });
            return defer.promise;
        },
        GetDetailInfo: function (ProductID) {
            // HOW TO IMPLEMENT THIS
            // productService.products is available here. Loop through and find.
        }
    };
}]);

在您的控制器中：

$scope.GetProducts = function() {
        ProductService.GetProducts().then(
            function(response) {
                    $scope.Products = response;
           }, function(error) {
             // your error code here
          });
    };

如何在AngularJS中访问服务中的控制器变量

1 个答案: