CODEWITHSUNDEEP
javascriptangularjs
Marc Rasmussen
Marc Rasmussen

Reputation: 20565

Angular "this" notation and data from service with a promise

So lets cut to the case. i have the following service:

feedBackModule.factory("feedbackSkillService", function ($q, $filter, Query) {
    var skills = [];
    return {
        getSkills: function () {
            var d = $q.defer();
            if (skills.length <= 0) {
                Query.api2({
                    method: 'GET',
                    route: 'feedback/skill'
                }).then(function (result) {
                    skills = result;
                    d.resolve(result);
                });
            }
            else {
                d.resolve(skills);
            }
            return d.promise;
        },
        putSkill: function (skill) {
            skills.push(skill);
        },
        deleteSkill: function (skill) {
            var index = skills.indexOf(skill);
            Query.api2({
                method: 'DELETE',
                route: 'feedback/skill',
                params: {id: skill.id}
            });
            skills.splice(index, 1);
        },
        editSkill: function (skill) {
            Query.api2({
                method: 'PUT',
                route: 'feedback/skill',
                params: {id: skill.id},
                data: {skill: skill}
            });
        }
    }

});

And the following controller:

    feedBackModule.controller('createCollectionController', ['Query', '$modalInstance', 'feedbackSkillService', 'feedbackCollectionService', function (Query, $modalInstance, feedbackSkillService, feedbackCollectionService) {
    this.collection = {};
    this.skills = [];

    feedbackSkillService.getSkills().then(function (result) {
        this.skills = result;
    });

    this.createSkill = function () {
        Query.api2({
            method: 'POST',
            route: 'feedback/skill',
            data: {skill: this.skill}
        }).then(function (result) {
            feedbackSkillService.putSkill(result);
        });
        $modalInstance.dismiss('cancel');
    };

    this.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

As you can see i am trying to fetch the skills from feedbackSkillService

However since this uses a promise once it returns the this.skill is out of scope meaning i cannot access it and set it correctly. I know you can do this with $scope but i do not wish to use $scope.

So how can i make sure i can access the variable?

Upvotes: 1

Views: 36

Answers (1)

deceze
deceze

Reputation: 522597

feedbackSkillService.getSkills().then(function (result) {
    this.skills = result;
}.bind(this));
// ^^^^^^^^

You simply need to ensure that the this inside the callback still refers to the this you expect; the simplest way here is to bind the context of the callback function.

Note that you may still have asynchronous timing issues, and by the time you call this.createSkill the result may not have come back yet.

Upvotes: 3

Related Questions