角指令内存泄漏？ [英] Angular directive memory leaks?
问题描述
我使用这个简单的HTML文件重现内存泄漏，我发现：
I'm using this simple html file to reproduce a memory leak I found:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script>
var app = angular.module('testApp', []);
app.directive('directive1', function() {
return {
template: '<div directive2></div>',
scope: true
};
});
app.directive('directive2', function () {
function LeakObject() {}
function Foo() {
this.bar = function($scope) {
$scope.nottheredude;
};
}
return {
scope: true,
link: function($scope) {
$scope.memoryThatLeaks = new LeakObject();
new Foo().bar({});
new Foo().bar($scope);
}
};
});
</script>
</head>
<body ng-app="testApp">
<button ng-click="show = !show">Toggle</button>
<div ng-if="show">The directive <div directive1></div></div>
<div ng-if="!show">Nothing</div>
</body>
</html>
我有一个指令，只创建一个新的范围，并在它的模板另一个指令。
I have a directive that only creates a new scope and has another directive in its template.
其他指令做一些事情有点奇怪（我试图缩小问题是什么造成的泄漏，这就是最短的code我发现，重现该问题）。
The other directive does something a bit strange (I tried to narrow down the problem to what's causing the leak and that's the shortest code I found that reproduces the issue).
在我的主HTML，我只是没有和指令1 用一个简单的 NG-如果之间切换。
In my main html, I just toggle between nothing and directive1 with a simple ng-if.
注意指令2 也创造上的 $范围称为一个新的对象 LeakObject 。我希望被垃圾收集该对象时，我切换回没什么DIV，因为该指令的范围应该死和所有它与它的数据，但根据在隐身模式下Chrome的堆快照工具，它没有得到未分配的。
Notice that directive2 also creates a new object on the $scope called LeakObject. I expect this object to be garbage collected when I'm toggling back to the nothing div, since the scope of the directive should die and all the data on it with it, but according to Chrome's heap snapshot tool in incognito mode, it's not getting unallocated.
我试图理解为什么出现这种情况，为什么呢，如果我在酒吧注释掉声明方法，它不会发生。
I'm trying to understand why that happens, and why, if I comment out the statement in the bar method, it doesn't happen.
重现步骤：
- 开启这个文件在隐身
- 开启开发工具并转到配置文件
- 刷新页面
- 点击
切换两次（所以现在你看到的没有，屏幕上再次） - 以堆快照
- 写'泄漏'的过滤器，这样就可以看到
LeakObject当它应该不是真的存在还是存在的。
- Open this file in incognito
- Open dev tools and go to Profiles
- Refresh the page
- Click
Toggletwice (so now you seeNothingon the screen again) - Take a heap snapshot
- Write 'leak' in the filter so you can see the
LeakObjectstill exists when it shouldn't really exist.
这是应该是这样的：
有人可以请帮助/解释？
Can someone please help/explain?
推荐答案
按预期工作一切，
按照你的步骤后，我看不出有任何的泄漏对象快照。
Everything works as expected, after following your steps i don't see any leak objects in the snapshot.
您可以添加以下code将链接功能看到，指令却越来越摧毁
you can add the following code to the link function to see that the directive is actually getting destroy
控制器和指令发出他们被摧毁权利之前的事件。在这里，您将有机会推倒你的插件和听众和pretty多执行垃圾收集。
订阅$范围。在$（'$毁灭'，......）事件
Controller and directives emit an event right before they are destroyed. This is where you are given the opportunity to tear down your plugins and listeners and pretty much perform garbage collection. Subscribe to the $scope.$on('$destroy', ...) event
$scope.$on('$destroy',function(){
//$scope.memoryThatLeaks = null;
alert('!');
});
这篇关于角指令内存泄漏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
