时间:2016-09-07 19:52:40

标签: javascript jquery angularjs typescript callback

在Typescript中,我尝试从角度控制器向角度服务发送回调,但它无法正常工作。我使用了Chrome Dev Tools并在回调函数的顶部加了一个断点。永远不要打破断点。回调函数永远不会触发。

我正在使用fullCalendar jQuery控件。我希望在CalendarController中定义Calendar_LeftClick()方法(因此我可以访问范围和其他变量)但我希望CalendarService实际上在日历上调用事件点击。

CalendarService.ts构建我的fullCalendar jQuery控件。 (" Omg,他应该使用指令!他和Angular一起使用jQuery?tsk tsk" - 是的,我将在稍后构建我的指令。现在,我需要弄清楚如何使用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);
    });
}

在CalendarController.ts中,我已完成以下操作......

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

最终,我正在做所有这些以使我的qtip2控件显示出来(这是我在Calendar_CreateTooltip中所做的事情)。我以前在常规JavaScript中使用它,但是现在我已经切换到TypeScript了。我做错了什么?

1 个答案:

答案 0 :(得分:2)

已注册的() => this.Calendar_LeftClick回调返回一个控制器方法(丢失的参数和上下文,因为该方法未绑定)。虽然它应该称之为。它应该是

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