Reference 'this' is null on $rootScope.$on

Question

Declared the following constructor in my Typescript AngularJS controller.

static $inject: Array<string> = [
    '$rootScope',
    'BookingRepository'
];
constructor(
    $rootScope: ng.IRootScopeService,
    bookingRepository: soft.data.BookingRepository
) {
    super();

    this.$rootScope = $rootScope;
    this.$rootScope.$on('accessController_onNavAccessSelected', this.accessController_onNavAccessSelected);

    this.bookingRepository = bookingRepository;
}

BUT when accessController_onNavAccessSelected is called, I'm getting null when I reference 'this'. I'm expecting the instance of the controller.

// Listening Events
accessController_onNavAccessSelected(event: ng.IAngularEvent, accessViewModel: soft.data.AccessViewModel): void {
    console.log(this);
}

What did I missed? Or How do I get a reference on the instance of my controller?

Possible duplicate of [TypeScript "this" scoping issue when called in jquery callback](https://stackoverflow.com/questions/20627138/typescript-this-scoping-issue-when-called-in-jquery-callback) — Aleksey L., Nov 07 '17 at 06:23

score 5 · Accepted Answer · answered Nov 07 '17 at 06:31

The context of the keyword this changes when using callbacks.

To prevent that, add .bind(this):

this.$rootScope.$on('accessController_onNavAccessSelected', this.accessController_onNavAccessSelected.bind(this));

or just use arrow function of ES6:

accessController_onNavAccessSelected = (event: ng.IAngularEvent, accessViewModel: soft.data.AccessViewModel) => {
    console.log(this);
}

Slava Utesinov · Answer 2 · 2017-11-07T07:14:17.397

Try to change accessController_onNavAccessSelected declaration this way:

accessController_onNavAccessSelected = (event: ng.IAngularEvent, accessViewModel: soft.data.AccessViewModel): void => {
    console.log(this);
}

Or use var self = this workaround:

var self = this;
accessController_onNavAccessSelected(event: ng.IAngularEvent, accessViewModel: soft.data.AccessViewModel): void {
    console.log(self);
}

Or you can force to specify exactly this, you needed, with the help of bind:

this.$rootScope.$on('accessController_onNavAccessSelected', this.accessController_onNavAccessSelected.bind(this));

Reference 'this' is null on $rootScope.$on

2 Answers2