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

Question

In my constructor function I pass:

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

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

and when I log it's value inside $onInit() at the start of it

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

I get literal code of $compile function.

But when $compile is called from within

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

which is referred to inside:

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

result of console.log('this.$compile:', this.$compile); is undefined value of this.$compile.

And that's my problem, because I don't know why it's undefined there, if at the init of the controller it already is a function.

Anybody knows what I may be missing?

Answer 1

That is because eventRender is called in the context of uiConfig and in that context there is no $compile I guess! One remedy that comes to my mind is to store a reference of your controller and use that inside of your eventRender function.

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

I have not tested it, Maybe it doesn't work at all.