jquery - Memory leak when manually compiling directives in Angular -

jquery - Memory leak when manually compiling directives in Angular -

i'm trying manually compile directive , add together dom via jquery. directive simple div ngclick handler. no jquery plugins used in directive (which seems focus of many of other memory leak threads).

if run profiler find leaks nodes. there can done prepare or problem in jquery/angular?

fiddle here profiler screenshot

html

<div ng-app="testapp"> <buttons></buttons> <div id="container"></div> </div>

javascript

var buttonsctrl = function($scope, $compile) { this.scope = $scope; this.compile = $compile; }; buttonsctrl.prototype.toggle = function() { var c = angular.element('#container').children(); if (0 in c && c[0]) { c.scope().$destroy(); c.remove(); } else { var s = this.scope.$new(); this.compile('<thing color="blue"></thing>')(s).appendto('#container'); } }; var thingctrl = function($scope) {}; thingctrl.prototype.clicky = function() { alert('test'); }; var module = angular.module('components', []); module.directive('buttons', function() { homecoming { restrict: 'e', template: '<button ng-click="ctrl.toggle()">toggle</button>', controller: buttonsctrl, controlleras: 'ctrl' } }); module.directive('thing', function() { homecoming { restrict: 'e', scope: { color: '@' }, template: '<div style="width:50px;height:50px;background:{{color}};" ng-click="ctrl.clicky()"></div>', controller: thingctrl, controlleras: 'ctrl' }; }); angular.module('testapp', ['components']);

if cache template function $compile returns, phone call new scope, memory leak seems decrease 1 node per click.

var buttonsctrl = function($scope, $compile) { this.scope = $scope; this.makething = $compile('<thing color="blue"></thing>'); this.thingscope = null; };

additionally, removing jquery wrappers buttonsctrl.toggle() method appears eliminate node leak altogether.

buttonsctrl.prototype.toggle = function() { var container = document.getelementbyid('container'); if (this.thingscope) { container.removechild(container.childnodes[0]); this.thingscope.$destroy(); this.thingscope = null; } else { this.thingscope = this.scope.$new(); container.appendchild(this.makething(this.thingscope)[0]); } };

see think.

jquery angularjs memory-leaks angularjs-directive