javascript - Angular trustAsHtml 不重新插入内容

Question

我在一个页面上有 2 个 div。当用户单击 button1 时，iframe 会加载到 div1 中，button2 和 div2 也是如此。 iframe 通过 ajax 加载并通过 $sce.trustAsHtml 获得信任。 html 本身看起来像这样:

<div ng-bind-html="video.trustediframe"></div>

这将是结果:

<div ng-bind-html="video.trustediframe"><iframe id="iframe1"></iframe></div>

一切正常，我可以看到视频，但是当用户单击 button2 时，我想关闭第一个视频的提要并删除 iframe 所以我这样做angular.element('#iframe1').remove()。现在，一旦用户再次单击 button1，iframe 将不会加载，尽管 div 与 ng-bind- 将再次加载 DOM html="video.trustediframe" 仍然存在。

我已经尝试重新分配 video.trustediframe 变量(这是一个作为 $sce.trustAsHtml 返回函数的函数)，然后执行 $scope。 $apply 但这无助于重新插入 iframe。我可以使用任何其他方法来使此行为正确吗？

Answer 1

通过跟踪当前活跃的玩家，我能够获得所需的行为。所以用 <div ng-if="video.isPlaying" ng-bind-html="video.trustediframe"> </div>我每页只有一个活跃的播放器，每当用户在不同的选项卡之间切换时，前一个播放器就会从 dom 中删除。