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);
};
我没有测试过,可能根本不起作用。
在我的构造函数中,我传递了:
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);
};
我没有测试过,可能根本不起作用。