Update in service not reflecting in controller. AngularJS

Question

I've ProductService and ProductsController. ProductService have ProductService.Products = []; variable which contains all the Products information. I access this Products-information in ProductsController and stores in variable named $scope.Products = [];.

Problem is some other service also using "ProductService", and updating "Products Info", using "UpdateInfo" function exposed in ProductService. Now these changes are not getting reflected in ProductsController variable $scope.Products = [];.

This is my 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;
        },

        UpdateInfo: function (ProductID, VariantID) {

            for (i in ProductService.Products) {
                if (ProductService.Products[i].ProductID == ProductID) {
                    for (j in ProductService.Products[i].Variants)  {
                        if (ProductService.Products[i].Variants[j].VariantID == VariantID) {
                            ProductService.Products[i].Variants[j].InCart = 1;    /* Updating Info Here, But its not reflecting */ 
                            break;
                        }
                    }
                    break;
                }
            }
        }
    };
}]);


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

    $scope.Products = [];

    $scope.GetProducts = function() {
        ProductService.GetProducts().then
        (
            function(response) {
                $scope.Products = response;
            },
            function(error) {
                alert ('error worng');
            }
        );
    };

    $scope.GetProducts();



});

Can some one help me how to solve this issue?

Yatrix · Accepted Answer · 2015-04-04 03:39:55Z

2

You can create a $watch on ProductService.Products in your controller. When the value changes, you can update $scope.Products with the new value.

$scope.$watch('ProductService.Products', function() {
    $scope.Products = ProductService.Products;
});

answered Apr 4, 2015 at 3:39

Yatrix

13.9k17 gold badges57 silver badges83 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. One more thing, every time my code route to "ProductsController", its makes a call to $scope.GetProducts(); which internally calls ProductService and then http service, so everytime its making a http request. which updates modified ProductInfo to new response. How to avoid this?

Yatrix Over a year ago

Services are injected, thus a shared resource. Think of it like having two variables pointing to a reference type in C#, VB or the like. If you change it one place, it's changed everywhere.

Manish Kr. Shukla · Accepted Answer · 2015-04-04 03:56:48Z

-1

Try assigning ProductsService.Products to $scope.products.

    $scope.GetProducts = function() {
            ProductService.GetProducts().then
            (
                function(response) {
                    $scope.Products = ProductService.Products;
                },
                function(error) {
                    alert ('error worng');
                }
            );
        };

answered Apr 4, 2015 at 3:56

Manish Kr. Shukla

4,4771 gold badge22 silver badges35 bronze badges

Collectives™ on Stack Overflow

Update in service not reflecting in controller. AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related