Struggling with Typescript, I have encountered an issue while trying to send a callback from an angular controller to an angular service. Despite setting a break point at the beginning of the callback function using Chrome Dev Tools, it never gets triggered and the function fails to execute.
The scenario involves utilizing the fullCalendar jQuery control. The objective is to have the Calendar_LeftClick() method defined in the CalendarController for access to scope and other variables, while having the CalendarService handle the event click on the calendar.
The approach involves CalendarService.ts constructing the fullCalendar jQuery control. ("Omg, he should use a directive! And he's using jQuery with Angular? tsk tsk" - Yes, directives will be implemented later. Currently focused on resolving callback issues 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);
});
}
Within CalendarController.ts, the following steps were taken...
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);
}
The main goal of these actions is to display the qtip2 control (as shown in Calendar_CreateTooltip). While I had success with this setup in regular JavaScript, transitioning to TypeScript seems to have caused issues. What could possibly be going wrong?