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

一个快速的猜测是您的事件侦听器不是从特定模式侦听showed.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);
    });
}