Encountering a strange issue with the new components. Previously, in version 1.4 directive, we had this block of code...
(function () {
'use strict';
angular.module('app.board').directive('dcCb', dcClipboardCopy);
function dcCb() {
return {
link : function(scope, elem) {
var clipboard = new Clipboard(elem[0]);
elem.on('$destroy', function() {
clipboard.destroy();
});
}
};
}
})();
Within the clipboard.destroy() function is the following...
Clipboard.prototype.destroy = function(){
this.listeners.destroy();
}
In 1.4, this refers to the element like so...
<button class="btn btn-sm btn-menu-outline copy-button" ...
This worked as expected since the button element had the listeners property that could be invoked.
After upgrading to 1.5 and having a component setup like this....
(function() {
'use strict';
angular.module('app.board').component('dcCb', {
...
controller: [ '$element','$scope',function($element,$scope) {
var self = this;
self.$postLink = postLink;
function postLink(){
var clipboard = new Clipboard($element[0]);
...
$element.on('$destroy', clipboard.destroy);
}
}]
});
})();
Now, within the destroy function of the Clipboard, this refers to the controller object. Thus, calling this.listeners results in an error.
My First Question :
In the newer components, this represents the component scope while it was referring to the button element in version 1.4. Was our approach incorrect back in 1.4?
Second Query : Shouldn't
var clipboard = new Clipboard($element[0])this inside the clipboard always points to the clipboard itself (due to the usage of the new keyword)?