AngularJS angular-ui-calendar TypeError: this.$compile is not a function; this.$compile has value when inside...
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?
javascript angularjs compilation initialization angular-calendar
asked Nov 23 '18 at 16:59
JohnDoenymJohnDoenym
192
add a comment |
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?
javascript angularjs compilation initialization angular-calendar
asked Nov 23 '18 at 16:59
JohnDoenymJohnDoenym
192
add a comment |
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?
javascript angularjs compilation initialization angular-calendar
asked Nov 23 '18 at 16:59
JohnDoenymJohnDoenym
192
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?
javascript angularjs compilation initialization angular-calendar
javascript angularjs compilation initialization angular-calendar
asked Nov 23 '18 at 16:59
JohnDoenymJohnDoenym
192
asked Nov 23 '18 at 16:59
JohnDoenymJohnDoenym
192
asked Nov 23 '18 at 16:59
JohnDoenymJohnDoenym
192
asked Nov 23 '18 at 16:59
JohnDoenymJohnDoenym
192
asked Nov 23 '18 at 16:59
JohnDoenymJohnDoenym
192
192
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Nov 25 '18 at 17:10
RathmaRathma
2551935
1
It worked, but when put inside constructor function:constructor($compile, uiCalendarConfig) { 'ngInject'; const self = this; this.$compile = $compile; this.uiCalendarConfig = uiCalendarConfig; }
– JohnDoenym
Nov 25 '18 at 19:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450517%2fangularjs-angular-ui-calendar-typeerror-this-compile-is-not-a-function-this%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 25 '18 at 17:10
RathmaRathma
2551935
1
It worked, but when put inside constructor function:constructor($compile, uiCalendarConfig) { 'ngInject'; const self = this; this.$compile = $compile; this.uiCalendarConfig = uiCalendarConfig; }
– JohnDoenym
Nov 25 '18 at 19:16
add a comment |
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.
answered Nov 25 '18 at 17:10
RathmaRathma
2551935
1
It worked, but when put inside constructor function:constructor($compile, uiCalendarConfig) { 'ngInject'; const self = this; this.$compile = $compile; this.uiCalendarConfig = uiCalendarConfig; }
– JohnDoenym
Nov 25 '18 at 19:16
add a comment |
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.
answered Nov 25 '18 at 17:10
RathmaRathma
2551935
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.
answered Nov 25 '18 at 17:10
RathmaRathma
2551935
answered Nov 25 '18 at 17:10
RathmaRathma
2551935
answered Nov 25 '18 at 17:10
RathmaRathma
2551935
answered Nov 25 '18 at 17:10
RathmaRathma
2551935
2551935
1
It worked, but when put inside constructor function:constructor($compile, uiCalendarConfig) { 'ngInject'; const self = this; this.$compile = $compile; this.uiCalendarConfig = uiCalendarConfig; }
– JohnDoenym
Nov 25 '18 at 19:16
add a comment |
1
It worked, but when put inside constructor function:constructor($compile, uiCalendarConfig) { 'ngInject'; const self = this; this.$compile = $compile; this.uiCalendarConfig = uiCalendarConfig; }
– JohnDoenym
Nov 25 '18 at 19:16
1
1
It worked, but when put inside constructor function:
constructor($compile, uiCalendarConfig) { 'ngInject'; const self = this; this.$compile = $compile; this.uiCalendarConfig = uiCalendarConfig; }– JohnDoenym
Nov 25 '18 at 19:16
It worked, but when put inside constructor function:
constructor($compile, uiCalendarConfig) { 'ngInject'; const self = this; this.$compile = $compile; this.uiCalendarConfig = uiCalendarConfig; }– JohnDoenym
Nov 25 '18 at 19:16
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450517%2fangularjs-angular-ui-calendar-typeerror-this-compile-is-not-a-function-this%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
