I have a memory leak in my application resulting from elements scopes not being destroyed.
For the following for field:
vm.fields.data.directions = [
{
type: 'required-textarea',
key: 'step',
templateOptions:{
label: 'Directions',
placeholder: 'Wrap a bacon piece around each spear; secure ends with a toothpick.'
},
expressionProperties: {
'link' : function($viewValue, $modelValue, scope){
scope.$on('$destroy', function () {
$timeout(function() {
console.log(scope);
}, 100);
});
}
}
This consoles out a scope completely intact with multiple watchers. For my application I have multiple tabs for different form field inputs, some contain around 20 of the above referenced fields. Every time a tab is navigated away and clicked on again, the apps watcher count continues to grow since the scope is never destroyed.
Why would the scope exist here after destroyed is being called?