AngularJS service only running the first time controller is used

Question

I have the following controller that uses a service Customers to return customers. The problem is that its only executing the service the first time the controller is run. Looking at my server I see its only performing the get request the FIRST time the controller used(loading that view) if I change views and say add a customer and come back to the view that list customers its not updated because there was not another get request from the service.

  .controller('searchCTRL', ['$scope', '$http', 'Customers', function($scope, $http, Customers) {
        $scope.customers = Customers;
        $scope.deleteCustomer = function(id) {
            $http.delete('/api/customer/' + id)
                .success(function(data) {
                    $scope.customers.data = data;
                })
                .error(function(data) {
                    console.log('Error: ' + data);
                });
        };
  }])

and

.factory('Customers', function($http){
    var Customers = {};
    $http.get('/api/customer')
        .success(function(data) {
            Customers.data = data;
        })
        .error(function(data){
            console.log('error: ' + data);
        });
    return Customers;
});

if I stay on the view and reload the page it gets the data like it should but any subsequent visits to the page no longer execute the get. Any help would be appreciated.

marcoseu · Accepted Answer · 2014-03-04 21:11:15Z

8

Angular .factory is a singleton so it will always only run once. Also, the $http call is async so you should be using promise in order to get the data to your controller. Try the following:

.factory('Customers', function($http, $q){
    return function () {
        var d = $q.defer();
        $http.get('/api/customer')
            .success(function(data) {
                d.resolve(data);
            })
            .error(function(data){
                console.log('error: ' + data);
                d.reject(data);
            });
        return d.promise;
    };
});

and in your controller:

.controller('searchCTRL', ['$scope', '$http', 'Customers', function($scope, $http, Customers) {
    Customers().then(function (data) {
        $scope.customers = data;
    });
...

As $http returns a promise, you can further simply your .factory by doing:

.factory('Customers', function($http){
    return function () {
        return $http.get('/api/customer');
    };
})

For more detail, see documentation for $http.

edited Mar 4, 2014 at 21:11

answered Mar 4, 2014 at 20:52

marcoseu

3,9622 gold badges21 silver badges36 bronze badges

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

2 Comments

Mikke Over a year ago

The function could be shortened to simply return $http.get('/api/customer');. Also, the question seems to want to simulate "promise unwrapping", i.e. immediately returning an object which later is filled with data. (Another option would be to go for your promise returning example, and then resolve it in the $route configuration.)

Brent Aureli Over a year ago

Thank you so much, this solved the problem. I'll have to read up on the promises, I haven't used them yet. Seems reasonable to return a promise of data until the data is available. Thanks again!

Collectives™ on Stack Overflow

AngularJS service only running the first time controller is used

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related