Javascript AngularJS脚本运行了两次

我正在构建一个脚本，在启动模式打开时自动播放视频。我在模态打开表单上使用ng单击，它使用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);
    });
}

一开始效果不错。但是当我关闭第一个模式（并停止视频），在另一个模式上再次启动脚本时，第一个视频开始，第二个视频开始。现在我有两个视频正在播放

控制台正在返回：：

正在播放：播放者1
正在播放：播放者1

正在播放：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>

{{video.subheader}}

一个快速的猜测是，您的事件侦听器不是从特定的模式侦听show.bs.modal，而是从页面上的任何模式侦听show.bs.modal。假设每个模式都有基于视频id的自己的id（或数据属性或其他内容）（如果它们没有id，则可以使用jQuery:has选择器-：has（“#player”+id）-或类似的东西）

$scope.startVideo=函数（id）{
$（window）.on（'show.bs.modal'，''，function（）{
log（'Id nu是：'+Id）；
var v=document.getElementById（“播放器”+id）；
v、 play（）；
console.log（'正在播放：player'+id）；
});
}
一个快速猜测是，您的事件侦听器没有从特定模式中侦听Showed.bs.modal，而是从页面上的任何模式中侦听。假设每个模式都有基于视频id的自己的id（或数据属性或其他内容）（如果它们没有id，则可以使用jQuery:has选择器-：has（“#player”+id）-或类似的东西）

$scope.startVideo=函数（id）{
$（window）.on（'show.bs.modal'，''，function（）{
log（'Id nu是：'+Id）；
var v=document.getElementById（“播放器”+id）；
v、 play（）；
console.log（'正在播放：player'+id）；
});
}
您正在创建一个新变量，
v
每次打开模式时。当你关闭它时，你所做的变量不会消失。你需要处理that@Ronnie当我删除脚本末尾的v时，就像；删除第五条；它不会工作。只需执行
document.getElementById（“player”+id）.play（）如果这还不能解决问题，那就为我们制作一把小提琴来复制这个问题。@Ronnie生活可以如此简单。这就解决了问题。也许把它作为答案归档，这样我就可以把它标记为答案了！每次打开模式时，您都在创建一个新变量，
v
。当你关闭它时，你所做的变量不会消失。你需要处理that@Ronnie当我删除脚本末尾的v时，就像；删除第五条；它不会工作。只需执行
document.getElementById（“player”+id）.play（）如果这还不能解决问题，那就为我们制作一把小提琴来复制这个问题。@Ronnie生活可以如此简单。这就解决了问题。也许把它作为答案归档，这样我就可以把它标记为答案了！情态动词确实使用他们自己的id，我可以再次调用。问题是它无法使用此选择器。现在，视频无法播放$（window）.on（'show.bs.modal'，'#videomodal'+id，function（）{请发布其中一个模态的html，和/或尝试：has selectorHI I I添加了模态。抱歉--我觉得它看起来不错，不确定为什么它不起作用--show.bs.modal应该发送到类为'modal'的元素，该类将冒泡，然后由委托的处理程序处理。这将正确地将其过滤到模态t根据您输入的“#videomodal”+id的id选择器显示hat，然后开始播放（假设事件处理程序仍在安装中）。我假设您没有在另一条评论中推荐的“delete v”行，因为这会产生问题。请更正，我没有使用delete v，因为它不起作用。但我仍然没有一个非常重要的解决方案；）还有其他想法吗？模态确实使用自己的id。然后我可以再次调用它。问题是它无法使用此选择器。现在视频无法播放。$（窗口）。on（'show.bs.modal'，'#videomodal'+id，function（）{请发布其中一个模态的html，和/或尝试：has selectorHI I I添加了模态。抱歉--我觉得它看起来不错，不确定为什么它不起作用--show.bs.modal应该发送到类为'modal'的元素，该类将冒泡，然后由委托的处理程序处理。这将正确地将其过滤到模态t根据您输入的“#videomodal”+id的id选择器显示hat，然后开始播放（假设事件处理程序仍在安装中）。我假设你没有在另一条评论中推荐的“delete v”行，因为这会产生问题。对，我没有使用delete v，因为它不起作用。但我仍然没有一个非常有趣的解决方案；）还有其他想法吗？
$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);
    });
}