I have some textAngular code where I watch a variable in the scope, multiple times? Is there a simple way to only create this watch once, or can I detect that it exists???
The section of code is:
taRegisterTool('fontColor', {
display: "<button colorpicker type='button' class='btn btn-default ng-scope' title='Font Color' colorpicker-close-on-select colorpicker-position='bottom' ng-model='fontColor' style='color: {{fontColor}}'><i class='fa fa-font '></i></button>",
action: function (deferred) {
var self = this;
self.$watch('fontColor', function (newValue) {
self.$editor().wrapSelection('foreColor', newValue);
});
self.$on('colorpicker-selected', function () {
deferred.resolve();
});
self.$on('colorpicker-closed', function () {
deferred.resolve();
});
return false;
}
});
Each time this button is clicked, this action is executed. This $watch causes multiple instances to be created and to live on.
Based on the helpful comment by 'npe' below, I have amended the code to keep the watch from being created multiple times.
New Code:
taRegisterTool('fontColor', {
display: "<button colorpicker type='button' class='btn btn-default ng-scope' title='Font Color' colorpicker-close-on-select colorpicker-position='bottom' ng-model='fontColor' style='color: {{fontColor}}'><i class='fa fa-font '></i></button>",
action: function (deferred) {
var self = this;
if (typeof self.listener == 'undefined') {
self.listener = self.$watch('fontColor', function (newValue) {
console.log(newValue);
self.$editor().wrapSelection('foreColor', newValue);
});
}
self.$on('colorpicker-selected', function () {
deferred.resolve();
});
self.$on('colorpicker-closed', function () {
deferred.resolve();
});
return false;
}
});
Thanks for your insight!
Based on the comments and suggested addition of a log message from https://stackoverflow.com/users/1344008/npe, it is clear that in this instance the watch is created multiple times which I understood, and by looking at the log output: It is clear that every watch is added and even if exactly the same variable is watched, one needs to keep track of the listener which is returned when it is added in order to remove it. This makes complete sense... I just wasn't thinking so clearly :-) So I amended the code to remove this inefficiency. Thanks to those that looked at this.