AngularJS脚本运行了两次

AngularJS script is running twice

本文关键字：两次 脚本 运行 AngularJS      更新时间：2023-09-26

我正在构建一个脚本，当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);
    });
}

一开始工作得很好。但是当我关闭第一个模态(并停止视频)，并在另一个模态上再次启动脚本时，第一个视频开始，第二个视频开始。现在有两个视频在播放。

console is giving back::

现在播放: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>

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

一个快速的猜测是，您的事件侦听器不是从特定的模态侦听shown.bs.modal，而是从页面上的任何模态侦听。假设每个模态都有自己的id(或数据属性或其他东西)基于视频的id(如果他们没有id，你可以使用jQuery:has selector -: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);
    });
}
相关文章：