AngularJS脚本运行两次

Question

我正在构建一个脚本，在Bootstrap模式打开时自动播放视频。我在模态打开窗体上使用ng-click，它使用angularjs控制器运行jquery脚本。

$scope.startVideo = function (id) { 
    $(window).on('shown.bs.modal', function() { 
     console.log('Id nu is: '+id); 
     var v = document.getElementById("player"+id); 
     v.play(); 
     console.log('Now playing: player'+id); 
    }); 
} 

它起初工作正常。但是，当我关闭第一个模式（并停止视频），并在另一个模式上再次触发剧本时，第一个视频开始播放，第二个视频开始播放。所以现在我有2个视频正在播放。

该控制台回馈：

现在播放：PLAYER1
现在播放：PLAYER1

现在播放：player2

，这可能是该模式的一部分有趣的：

<div class="modal-body"> 
    {{video.subheader}}<br> 
    <video id="player{{video.id}}" width="100%" height="100%" controls> 
     <source src="{{video.videourl+video.ext}}" type="video/mp4></source> 
    </video> 
</div> 

<!-- Popup modals below --> 
<div id="videomodal{{video.id}}" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">{{video.header}}</h4> 
      </div> 
      <div class="modal-body"> 
       {{video.subheader}}<br> 
       <video id="player{{video.id}}" width="100%" height="100%" controls> 
        <source src="{{video.videourl+video.ext}}" type="video/mp4"></source> 
       </video> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

为什么脚本运行两次？当模式打开时，我需要它运行一次。当我停止视频时，关闭模式并打开另一个模式，另一个模式应该开始。不是都。

Answer 1

快速的猜测是，你的事件监听器不是从一个特定的模式，但是从页面上的任何模式监听shown.bs.modal。假设每个模式都有自己的id（或数据属性或某些东西）基于视频的id（如果他们没有id可以使用jQuery：has选择器 - ：has（'＃player'+ id） - 或者沿着这些线）

$scope.startVideo = function (id) { 
    $(window).on('shown.bs.modal', '<modal specific selector>', function() { 
     console.log('Id nu is: '+id); 
     var v = document.getElementById("player"+id); 
     v.play(); 
     console.log('Now playing: player'+id); 
    }); 
}