gpt4 book ai didi

jquery - 在 Angular 中手动编译指令时出现内存泄漏

转载 作者:行者123 更新时间:2023-12-01 05:48:39 24 4
gpt4 key购买 nike

我正在尝试手动编译指令并通过 JQuery 将其添加到 DOM。该指令是一个带有 ngClick 处理程序的简单 div。指令本身没有使用任何 JQuery 插件(这似乎是许多其他内存泄漏线程的焦点)。

如果您运行探查器,您会发现它泄漏节点。有什么办法可以解决这个问题还是 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() {
return {
restrict: 'E',
template: '<button ng-click="ctrl.toggle()">toggle</button>',
controller: ButtonsCtrl,
controllerAs: 'ctrl'
}
});

module.directive('thing', function() {
return {
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']);

最佳答案

如果缓存 $compile 返回的模板函数,然后使用新范围调用该函数,则内存泄漏似乎会减少到每次点击仅一个节点。

var ButtonsCtrl = function($scope, $compile) {
this.scope = $scope;
this.makeThing = $compile('<thing color="blue"></thing>');
this.thingScope = null;
};

此外,从 ButtonsCtrl.toggle() 方法中删除 jQuery 包装器似乎可以完全消除节点泄漏。

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 what you think.

关于jquery - 在 Angular 中手动编译指令时出现内存泄漏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24392234/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com