Angular ng-if 持有对 DOM 元素的引用

Question

在 AngularJS 项目中，我们有一个 video 元素，当用户点击 Space 时，它需要在播放和暂停之间切换。这可能是一个有点幼稚的实现，但在一个指令中，我们已将处理程序连接到$document click 事件以切换视频。它看起来像这样：

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

角度方式是将其添加到链接函数中：

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

这是任何指令事件绑定的好习惯。最终（据我所知）垃圾收集器将通过并清除这些事件，但是如果您在 ng-repeat.... 中的项目上进行事件，那么您可能会发生内存泄漏。