TypeScript callback between classes

Question

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?

You've posted ~100 lines of code and just said it "doesn't work". Doesn't work means what? A runtime error? Compile-time error? Nothing happens? Your computer caught fire? — Ryan Cavanaugh
– Ryan Cavanaugh, Commented Sep 7, 2016 at 19:55
@RyanCavanaugh Thanks for asking me to clarify. 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. Also, my computer is on fire whilst I type this ;) — Targaryen
– Targaryen, Commented Sep 7, 2016 at 22:20

Estus Flask · Accepted Answer · 2016-09-07 22:35:38Z

2

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

answered Sep 7, 2016 at 22:35

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

Collectives™ on Stack Overflow

TypeScript callback between classes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related