Angularjs - assign variable in callback function

Question

I'm using controller as-syntax and met a ridicilous circumstance

this.showAddressDetail = false;
this.searchPlace = function() {
    GoogleService.searchPlace($('#address')[0], function(place) {
        this.showAddressDetail = true;
    });
};

whenever the callback of GoogleService.searchPlace be triggered. I want to assign true to this.showAddressDetail. But in this case this is the callback function.
So how to assign value to this.showAddressDetail?

michelem · Accepted Answer · 2016-06-16 09:54:46Z

5

You have to assign the "main" this to another variable:

var vm = this;
vm.showAddressDetail = false;
vm.searchPlace = function() {
    GoogleService.searchPlace($('#address')[0], function(place) {
        vm.showAddressDetail = true;
    });
};

answered Jun 16, 2016 at 9:54

michelem

14.6k5 gold badges55 silver badges67 bronze badges

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

Comments

A.B · Accepted Answer · 2016-06-16 09:57:20Z

1

you can use this-that approach to save outer this context

var that = this;
that.showAddressDetail = false;
that.searchPlace = function() {
    GoogleService.searchPlace($('#address')[0], function(place) {
        that.showAddressDetail = true;
    });
};

answered Jun 16, 2016 at 9:57

A.B

20.5k3 gold badges43 silver badges74 bronze badges

Comments

Aides · Accepted Answer · 2016-06-16 09:59:44Z

1

The this keyword by default refers to the owner of a function - not necessarily the place in code (reference).

To fix this simply store the controllers this in a local scope variable:

var vm = this;
vm.showAddressDetail = false;
vm.searchPlace = function() {
    GoogleService.searchPlace($('#address')[0], function(place) {
        vm.showAddressDetail = true;
    });
};

Common keywords for the local variable are vm (ViewModel), that, _this, self.

answered Jun 16, 2016 at 9:59

Aides

3,6935 gold badges27 silver badges41 bronze badges

Comments

Abdul23 · Accepted Answer · 2016-06-16 10:15:51Z

1

You can use a bind to call a function with a specific value of this in case that function is not called as a constructor.

var fn =  function(place) {
    this.showAddressDetail = true;
};
var callback=fn.bind(this);
this.showAddressDetail = false;
this.searchPlace = function() {
    GoogleService.searchPlace($('#address')[0],callback);
};

answered Jun 16, 2016 at 10:15

Abdul23

6,1152 gold badges18 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angularjs - assign variable in callback function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related