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 秒后消失，但您会注意到您可以按 Space 切换视频状态，即使它已从 DOM 中删除 ng-if。

要获得答案，我正在寻找：

1) 一个更好的，也许 "more Angular" 方法来解决这个问题。

2) 一种检测视频不再出现在 DOM 上的方法，因此可以删除引用。

谢谢！

Answer 1

angular 方法是将其添加到 link 函数中：

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

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

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

Angular ng-if holds reference to DOM element

javascript

angularjs

html5-video