using call and bind in an angular service

Question

I'm currently learning angularjs and I am wondering something. How would one user call or apply to connect the value of a call back function to a value in a service. Let me explain.

app.service("AppService"), function(){
    //value to be bound
    this.value;

    //function that references a promise or something
    this.doThing = function(){
        //refer to a promise

        externalPromise("string").then(function(response){ 
            //The scope has changed so "this" is no longer refering to the service
            this.value = response;
        });
    }

})

app.controller("AppCtrl", function(AppService){

    alert(AppService.value);

})

I know that this could (and probably should be) can be done:

app.service("AppService"), function(){
    //value to be bound
    var value;

    //function that references a promise or something
    var doThing = function(){
        //refer to a promise

        externalPromise("string").then(changeValue(response));
    }

    function changeValue(response){
        value = response;
    }
    var getValue = function(){return value}

    return {
        value: getValue,
        doThing: doThing
    }
})



app.controller("AppCtrl", function(AppService){

        alert(AppService.value);

    })

But if the point of services is that they return the "this" then I think it would make the most sense to exploit that. I think it might be possible to use call bind or apply to set the this inside the changeValue function to the same as this in the controller. I can't figure out exactly how. Does anybody know? Even if it is unnecessary, think of it as an academic exercise.

Edit: The solution presented in the other question is valid and would work. However I wanted to know if there was a specific way to do it in angular. The answer That I marked as correct recommended using angular.bind() on the function that I wanted to bind.

Possible duplicate of How to access the correct `this` / context inside a callback? — Estus Flask
– Estus Flask, Commented Aug 4, 2016 at 14:09
I like the function solution, or I usually do something like var that = this;. And then that.value = ...; — user3180309
– user3180309, Commented Aug 4, 2016 at 14:24
hmm could you write an example for the var that = this? The function way seems to be the way to write for an angular factory since that doesn't return this. — xerotolerant
– xerotolerant, Commented Aug 4, 2016 at 14:48

mcgraphix · Accepted Answer · 2016-08-04 15:43:57Z

1

You should be able to use angular.bind to give your handler function the correct "this":

 this.doThing = function(){
   externalPromise("string").then(angular.bind(this, function(response){ 
        //this is now the "this" you expect
        this.value = response;
    }));
 }

An alternative that is commonly used is to store "this" in a variable and then use that variable in your handler:

this.doThing = function(){
   var self = this;
   externalPromise("string").then(function(response){ 
        //self is now the "this" you wanted.
        self.value = response;
    });
 }

answered Aug 4, 2016 at 15:43

mcgraphix

2,7331 gold badge14 silver badges15 bronze badges

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

1 Comment

xerotolerant Over a year ago

This looks like what I've been looking for. I'll read up the documentation for angular.bind and try your recommendation and mark as correct once I get it working.

Collectives™ on Stack Overflow

using call and bind in an angular service

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related