Javascript 如果保存对DOM元素的引用，则为Angular ng

在AngularJS项目中，我们有一个

视频

元素，当用户点击空格时，该元素需要在播放和暂停之间切换。这可能是一个有点幼稚的实现，但在一个指令中，我们将一个处理程序连接到

$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中

我创建了一个示例来演示这个问题。视频在2.5秒后消失，但您会注意到，即使通过

ng if

将其从DOM中删除，也可以按空格键切换视频状态

要回答这个问题，我需要：

1） 一个更好的，也许是“更具角度”的方法来解决这个问题

2） 一种检测视频不再位于DOM上以便删除引用的方法

---

谢谢

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

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

---

这是任何指令事件绑定的良好实践。最终（据我所知），垃圾收集器将遍历并清除这些事件，但是如果您正在使ng中的项目上的事件重复。。。。那么您就有可能发生内存泄漏

这也是我的想法，但视频似乎仍然“在那里”。尝试添加一个带有启动/暂停视频功能的

$interval

，它将继续播放/停止。如果这不是OP的问题，那么这个答案肯定是正确的。显示

console.log（evt）按下空格键时没有任何动作。我添加了$interval服务（我甚至忘了它在那里了lol）哦，哇，这就是我要找的！谢谢你的回答！