javascript - Angular ng-if 保存对 DOM 元素的引用

Question

在 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 上的方法，以便可以删除引用。

谢谢!

Answer 1

Angular 方法是将其添加到链接函数中:

scope.$on("$destroy", function () {
  $document.off('keypress');
});

这对于任何指令事件绑定(bind)来说都是一个很好的实践。最终(据我所知)垃圾收集器将遍历并清除这些事件，但是如果您在 ng-repeat 中的项目上创建事件......那么您可能会出现内存泄漏。