Major Memory Leak in Directives when using '&' binding #6794
Description
When a directive is written using '&' reverse one way binding there is a major memory leak. Once it is entered in the DOM, the Scope of the directive, it's parent, and detached DOM elements are NEVER garbage collected. This is even after routing to another page and back. The $destroy event does get called, but any cleanup done does nothing to fix the leak.
Testing method:
We created an extremely simple directive:
angular.module('leakApp').directive('leaker',function(){
return {
template: '<div><span>I leak</span></div>'
scope:{onLeak: '&'},
link: function(scope, element, attrs){
scope.$on('$destroy', function(){console.log(arguments)})
}
});
We also created a simple router that switched between a plain text page and one with the directive.
Start on blank page, click link for page with directive, click link for blank page.
In chrome timeline force garbage collection.
Take heap snapshot. Despite being entirely gone from the page and no external references, directive is not GC'ed and because it contains a reference to it's parent, the parent is not collected either.
We then removed just the 1 way binding attribute.
The leak was gone.
Please let me know if you have any questions.
Ben Tesser