How to access controller variable in service in AngularJS

Question

I have a ProductService that fetches data and gives to ProductsController. This is the code.

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

Now i want to implement one more function in service that gives the detail information about a product. But since $scope.Products is not available in ProductService, i can not loop and get data for desired ProductID.

I want to implement that function in ProductService only not in ProductsController, becuase some other service(that needs product data) will be using this ProductService.

How to solve this problem?

If there is any better architecture to achieve the same, that is also welcome.

Why don't you store the Products array in the service instead? — Michael
– Michael, Commented Apr 3, 2015 at 8:01
I can do that too. But according to AngularJS best practice and SO suggestions its always good store Variables in controller. Correct me if i am wrong? — Devesh Agrawal
– Devesh Agrawal, Commented Apr 3, 2015 at 8:04
No. Controller is a good place to store VM specific to that view. If data need to be persisted and shared across multiple controllers/views then service is the best place to store the data @DeveshAgrawal — mohamedrias
– mohamedrias, Commented Apr 3, 2015 at 8:11
Do not access the controller in your service - that breaks the MVC pattern — Michael Kang
– Michael Kang, Commented Apr 3, 2015 at 8:12

mohamedrias · Accepted Answer · 2015-04-03 14:57:50Z

1

You need to rewrite the GetProducts in your service to store the products data inside the service.

Instead of returning $http(req), resolve the promise inside the service.

In the success callback, store the response data in the service by declaring a variable inside the service. Then return the promise to the controller.

This should solve your issue.

Sample code:

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

In your controller:

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

edited Apr 3, 2015 at 14:57

answered Apr 3, 2015 at 8:10

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Devesh Agrawal Over a year ago

Thanks for the response. Can you help me in what changes i need to make in controller now, so the Products are available in controller also?

mohamedrias Over a year ago

Updated above in the answer

Collectives™ on Stack Overflow

How to access controller variable in service in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related