在 AngularJS 项目中,我们有一个 video
元素,当用户点击 Space 时,需要在播放和暂停之间切换。这可能是一个稍微幼稚的实现,但在指令中,我们将一个处理程序连接到 $document
点击事件来切换视频。它看起来像这样:
var video = element.find('video')[0];
$document.on('keypress', function(evt){
if(evt.which === 32) {
// toggle video
video[video.paused ? 'play' : 'pause']();
}
});
到目前为止,这已按预期工作。唯一的问题是该指令是使用 ng-if
指令隐藏或显示的,但即使在 ng-if
表达式计算结果为 false
,文档单击处理程序仍然保留视频引用。当我们仍然听到视频播放时我们发现了这一点,即使它不再位于 DOM 中。
我创建了一个 Plnkr Example来演示这个问题。视频会在 2.5 秒后消失,但您会注意到,即使在通过 ng-if 从 DOM 中删除视频后,您也可以按 Space 来切换视频状态。
对于答案,我正在寻找:
1) 一种更好的、也许“更有 Angular ”的方法来解决这个问题。
2) 一种检测视频不再位于 DOM 上的方法,以便可以删除引用。
谢谢!
最佳答案
Angular 方法是将其添加到链接函数中:
scope.$on("$destroy", function () {
$document.off('keypress');
});
这对于任何指令事件绑定(bind)来说都是一个很好的实践。最终(据我所知)垃圾收集器将遍历并清除这些事件,但是如果您在 ng-repeat 中的项目上创建事件......那么您可能会出现内存泄漏。
关于javascript - Angular ng-if 保存对 DOM 元素的引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27977317/