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); 
    }); 
}