Angular get/set variable on scope with this from function

Question

I am adapting a controller to the "controller as" syntax. But while transforming the code, I remarked that I can't access the "scope" variables with this out of a function. If I understand the concept of this, then this does access the object it is used in. As example this code:

this.scopeVariable = undefined;

this.fooFunction = function () {
            resource.get()
                .$promise.then(function (result) {
                this.scopeVariable = result.foo;
            });
        };

So when I try to set the scopeVariable with this, I actually try to access an object from fooFunction, right? If this is the case, how can I grab an object outside of the function within the function?

Thanks for your answers!

score 1 · Accepted Answer · edited Dec 16 '15 at 09:24

You have this problem because the this keyword changes definition when in a different scope. That means that if you have a simple object e.g.

var a = {
    b: function() {
        console.log(this); // => will log the value of "a"
        setTimeout(function() {
            console.log('just some rubbish');
            console.log(this); // => will log inner function scope instead of "a"
        }, 200)
    }
} 

a.b(); // to see the results

To prevent this issue from happening you can reassign this to a variable which will stay intact through deeper scopes like this:

this.scopeVariable = undefined;
var self = this;

this.fooFunction = function () {
  resource.get()
  .$promise.then(function (result) {
    // using self. instead of this. makes the difference here
    self.scopeVariable = result.foo;
  });
};

Thanks a lot, exactly what I was searching for! – Shinjitaku Dec 16 '15 at 09:42 — Shinjitaku, Dec 16 '15 at 09:42

score 0 · Answer 2 · answered Dec 16 '15 at 08:54

Capturing the this being the scope in a variable: var that = this:

var that = this;
this.fooFunction = function () {
            resource.get()
                .$promise.then(function (result) {
                that.scopeVariable = result.foo;
            });
        };

Angular get/set variable on scope with this from function

2 Answers2