I'm trying to update our Angular version from 1.3.18 to 1.5. In general my application seems fine, but I'm getting an error;
Cannot read property 'off'
In Kendo.all.js it looks like it's around line 29527, in;
destroy: function () {
var that = this;
Select.fn.destroy.call(that);
that.wrapper.off(ns);
that.element.off(ns);
that._inputWrapper.off(ns);
that._arrow.off();
that._arrow = null;
that.optionLabel.off();
},
5 Answers, 1 is accepted
After posting, it seems the issue did not lie with Kendo/Angular, it lay with how we were creating directives. The last 2015 build of Kendo worked, but upgrading to the latest version of Kendo proved an issue.
We had a dialog in which we were using an Autocomplete and several drop down lists. We had created the directive with shared scope, when we moved between the tabs in our application (custom tabs using routing, not kendo tabs) we were getting the error. Refactoring the directive to have isolate it's scope has removed the issue.
I am experiencing the same issue with a Dropdown. I upgraded to v2016.1.226 of Kendo and Angular v1.5 and started getting this error when navigating away from a page. The destroy method was getting called twice for the dropdown. The first time works and the second time gets the JavaScript error.
TypeError: [LR Error] Cannot read property 'off' of null
at Select.extend.destroy (https://localhost:44305/[MYAPP]/Scripts/vendor.js:69806:28)
at https://localhost:44305/[MYAPP]/Scripts/vendor.js:158768:32
at Scope.$broadcast (https://localhost:44305/[MYAPP]/Scripts/vendor.js:26975:28)
at Scope.$destroy (https://localhost:44305/[MYAPP]/Scripts/vendor.js:26593:14)
at cleanupLastView (https://localhost:44305/[MYAPP]/Scripts/vendor.js:204426:26)
at https://localhost:44305/[MYAPP]/Scripts/vendor.js:204459:15
at publicLinkFn (https://localhost:44305/[MYAPP]/Scripts/vendor.js:17937:29)
at https://localhost:44305/[MYAPP]/Scripts/vendor.js:18279:29
at boundTranscludeFn (https://localhost:44305/[MYAPP]/Scripts/vendor.js:18076:16)
at controllersBoundTransclude (https://localhost:44305/[MYAPP]/Scripts/vendor.js:18852:20)
This method was getting called to destroy:
function destroyWidgetOnScopeDestroy(scope, widget) {
var deregister = scope.$on('$destroy', function () {
deregister();
if (widget) {
if (widget.element) {
widget.destroy(); <<<<<<<<<<<
}
widget = null;
}
});
return deregister;
}
And was failing at this spot:
destroy: function () {
var that = this;
Select.fn.destroy.call(that);
that.wrapper.off(ns);
that.element.off(ns);
that._inputWrapper.off(ns);
that._arrow.off(); <<<<<<<<<<<<<<<<<<<<<<<<<
that._arrow = null;
that.optionLabel.off();
},
The discussed issue is a known bug, which is already addressed: The fix will be included in the next internal build of Kendo UI which should be out till the end of week.
Regards,
Georgi Krustev
Telerik
This issue is a known one for
Kendo UI Core that has been resolved internally and should be available in
Q1 2016 SP2 release (no firm release date as of today):
Throws an error due to multiple attempts to destroy a widget#1501
Description When the widget is nested in another one, like Kendo UI Window, then it will be destroyed by kendo.destroy(children) call. The AngularJS binding, however, will also try to destroy it: ...