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?

Answer 1

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