Setting local variables as result of Ajax call in Factory

Question

I'm attempting to create a factory that stores the result of an AJAX call in a variable. So far, I have something along these lines:

angular.module('frontApp')
    .factory('myFactory', function(Restangular) {
        var myFactory = function() {
            this.loadedData = [];
            loadData()
        }   

        var loadData = function() {
            Restangular.all('endPoint').customGET('path/run').then(
                function(success) {
                    this.loadedData = success.results;
                }
            );
        }

        return stoppingPatternFactory;
    });

But I get an error: cannot set property 'loadedData' of undefined.

I understand that the this keyword in this context refers to the function context which is why I'm getting the error. The issue is that I cant wrap my head around how to set this.loadedData in the first function when the Restangular call is asynchronous. I've tried just making the request in the first function and trying to set the variable in the callback, but I get the same error.

EDIT: I should probably add that I'm trying to create multiple instances of this factory, e.g. var f = new myFactory() so that each instance of a directive has its own factory associated with it.

The use of 'this' in a factory is mis-used. Check this post for proper use: http://stackoverflow.com/questions/14324451/angular-service-vs-angular-factory/24442224#24442224 — Michael Kang, Jul 21 '14 at 05:13
Hm - I only briefly looked at this but it seems like they're setting global variables for the Factory which will be available to all instances of the Factory, I need variables that are only available to each instance. — samturner, Jul 21 '14 at 23:40
Factory and Services are singletons - they are global. But you can implement a getInstance() that returns a new object every time its called. — Michael Kang, Jul 21 '14 at 23:41

score 1 · Answer 1 · answered Jul 21 '14 at 03:52

you need to set the loadedData in then callback

angular.module('frontApp')
.factory('myFactory', function(Restangular) {

    var myFactory = function() {
        var self = this;
        self.loadedData = [];
        loadData().then(function(data){
            self.loadedData =  data;
        })
    }   

    var loadData = function() {
        var restApi = Restangular.all('endPoint')
        return restApi.customGET('path/run').then(
            function(success) {
                return success.results;
            }
        );
    }

    return stoppingPatternFactory;
});

score 0 · Answer 2 · answered Jul 21 '14 at 03:49

I believe what you are looking for is "call" or "apply". It will allow you to call a method while setting its "this" reference. You can then save that reference and set its properties anywhere. Something like this should work.

angular.module('frontApp')
.factory('myFactory', function(Restangular) {
    var myFactory = function() {
        this.loadedData = [];
        loadData.call(this);
    }   

    var loadData = function() {
        var self = this;
        Restangular.all('endPoint').customGET('path/run').then(
            function(success) {
                self.loadedData = success.results;
            }
        );
    }

    return myFactory;
});

Setting local variables as result of Ajax call in Factory

2 Answers2