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?](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) — Estus Flask, Aug 04 '16 at 14:09
I like the function solution, or I usually do something like `var that = this;`. And then `that.value = ...;` — jmbmage, Aug 04 '16 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, Aug 04 '16 at 14:48

score 1 · Accepted Answer · answered Aug 04 '16 at 15:43

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;
    });
 }

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. — xerotolerant, Aug 04 '16 at 19:40

using call and bind in an angular service

1 Answers1