AngularJS angular-ui-calendar TypeError: this.$compile is not a function; this.$compile has value when inside $onInit(), but undefined when outside

AngularJS angular-ui-calendar TypeError: this.$compile is not a function; this.$compile has value when inside $onInit(), but undefined when outside

在我的构造函数中,我传递了:

constructor($compile, uiCalendarConfig) {
    'ngInject';

    this.$compile = $compile;
    this.uiCalendarConfig = uiCalendarConfig;
}

当我在 $onInit() 开始时记录它的值

$onInit() {
    console.log('this.$compile:', this.$compile, 'this.uiCalendarConfig:', this.uiCalendarConfig);
...
}

我得到了 $compile 函数的文字代码。

但是当从内部调用 $compile 时

eventRender( event, element, view ) {
  element.attr({'tooltip': event.title,
    'tooltip-append-to-body': true});
  console.log('event:', event);
  console.log('edited element:', element);
  console.log('view:', view);
  console.log('this.$compile:', this.$compile);
  this.$compile(element)(this);
};

里面提到的:

this.uiConfig = {
      calendar: {
        height: 450,
        editable: true,
        header:{
          left: 'title',
          center: '',
          right: 'today, prev, next'
        },
        eventClick: this.alertOnEventClick,
        eventDrop: this.alertOnDrop,
        eventResize: this.alertOnResize,
        eventRender: this.eventRender
      }
};

console.log('this.$compile:', this.$compile); 的结果是 undefined this.$compile.

的值

这就是我的问题,因为我不知道为什么它在那里未定义,如果在控制器的初始化时它已经是一个函数。

有人知道我可能遗漏了什么吗?

那是因为 eventRender 是在 uiConfig 的上下文中调用的,而在那个上下文中没有 $compile 我猜!我想到的一种补救措施是存储控制器的引用并在 eventRender 函数中使用它。

var self = this;

eventRender( event, element, view ) {
  element.attr({'tooltip': event.title,
    'tooltip-append-to-body': true});
  console.log('event:', event);
  console.log('edited element:', element);
  console.log('view:', view);
  console.log('this.$compile:', this.$compile);
  self.$compile(element)(this);
};

我没有测试过,可能根本不起作用。