Targaryen Targaryen - 2 months ago 19
Javascript Question

TypeScript callback between classes

In Typescript, I'm trying to send a callback from an angular controller to an angular service, but it is not working. I used Chrome Dev Tools and stuck a break point at the top of the callback function. Never hit the breakpoint. The callback function never fires.

I am using the fullCalendar jQuery control. I want the Calendar_LeftClick() method to be defined in the CalendarController (so I can access the scope and other vars) but I want the CalendarService to actually call the event click on the calendar.

CalendarService.ts builds my fullCalendar jQuery control. ("Omg, he should use a directive! And he's using jQuery with Angular? tsk tsk" - Yes, I will build my directives later. For now, I need to figure out how to do callbacks with TypeScript.)

public createCalendar(eventList): void {
$('#calendar').fullCalendar({
height: 'auto',
events: eventList,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: true,
droppable: true,
selectable: true,
eventClick: this.calendarEventClick
});
}

public registerClickObserver(callback): void {
if (this._observerCallbacks == null)
this._observerCallbacks = [];

this._observerCallbacks.push(callback);
}

public calendarEventClick(event, jsEvent, view): void {
this._currentId = event.id;
this._currentEvent = event;

angular.forEach(this._observerCallbacks, (callback) => {
callback(event, jsEvent, view);
});
}


In CalendarController.ts, I've done the following...

constructor(...) {
this.CalendarService.registerClickObserver(() => this.Calendar_LeftClick);
}

public Calendar_LeftClick(event: any, jsEvent: any, view: any) {
//...other code here
this.Calendar_CreateTooltip(jsEvent);
}

public Calendar_CreateTooltip(jsEvent: any) {
if (this.tooltip != null) this.tooltip.destroy();
this.tooltip = null;
this.tooltip = $('<div/>').qtip( "option", {
prerender: true,
content: {
text: ' ',
title: {
button: true
}
},
position: {
my: 'bottom center',
at: 'top center',
target: 'mouse'
},
style: {
classes: 'qtip',
width: 300
},
show: false,
hide: false
}).qtip('api');

this.tooltip.set({
'content.text': (api) => {
return this.$compile($('.tooltip-content').html())(this.$scope);
}
}).show(jsEvent);
}


Ultimately, I'm doing all of this to get my qtip2 control to show up (that's what I'm doing in Calendar_CreateTooltip). I used to have this working in regular JavaScript, but it's not working now that I have switched to TypeScript. What am I doing wrong?

Answer

Registered () => this.Calendar_LeftClick callback returns a controller method (with lost arguments and context, because the method isn't bound). While it is supposed to call it. It should be

this.CalendarService.registerClickObserver((...args) => this.Calendar_LeftClick(...args));