Javascript AngularJS-视频加载

我有一个模板，可以通过JSON文件将详细信息加载到其中。加载的内容随视频一起嵌入。JSON文件中的所有内容都运行良好，但每个项目上都会出现相同的视频。有没有一种方法可以加载分配给每个JSON文件的单个视频

以下是模板：

<div class="container" ng-repeat="guide in guides">
<div class="row">
<div class="col-md-12">
    <br/>
    <p><a ng-href="#/"><span class="glyphicon glyphicon-home"></span> Back to Guide List</a></p>
    <h1><span class="glyphicon glyphicon-play-circle"></span> Watch {{ guide.title }}</h1>

    <span>{{ guide.info }}</span><br/><br/>

</div>

<div class="col-md-12">    
    <video video="marvel">
    </video><!--This is the bit I'm having an issue with -->
</div>

<div class="col-md-6">
    <h3><span class="glyphicon glyphicon-education"></span> Background to {{ guide.title }}</h3>
    <span>{{ guide.background }}</span><br/><br/>
</div>
<div class="col-md-6">

    <h3><span class="glyphicon glyphicon-save"></span> Downloads for {{ guide.title }}</h3><br/>

                <a ng-href="{{ guide.pdf }}" target="_blank"><span class="glyphicon glyphicon-floppy-save"></span> Download Help Guide PDF</a><br/><br/>
                <a ng-href="{{ guide.video }}" target="_blank"><span class="glyphicon glyphicon-floppy-save"></span> Download Video</a>
    </div>

</div>
</div>

观看{guide.title}
{{guide.info}}


{{guide.title}的背景
{{guide.background}


{{guide.title}}的下载

我无法将任何数据绑定到视频标签中（这是我建立的一个指令）——那么有人有什么建议吗

---

提前谢谢

如果在每次重复迭代中引用不同的视频，应该会有所帮助；-）

---

如果

src=“…”

不起作用，请尝试

ng src=“…”

谢谢您的建议。事实上，我已经试过了——视频标签有点误导；因为它是一个称为“视频”的自定义指令

---

这只是带来了一个错误：无法获取/%7B%7B%20videoUrl%20%7D%7D

该指令引入了youtube嵌入—我首先使用它进行测试。其目的是将trustAsResourceUrl调整为另一种嵌入形式。指令代码如下（我已将标签从视频更改为视频播放器）

guideApp.指令（'videoPlayer'，函数（$sce）{
"严格使用",；
返回{
限制：'E'，
作用域：{video:'='}，
替换：正确，
模板：“”，
链接：功能（范围）{
范围：$watch（'videoPlayer'，功能（videoLink）{
if（视频链接）{
scope.videoUrl=$sce.trustAsResourceUrl（“https://www.youtube.com/embed/“+视频链接）；
}
});
}
};
});

您好，谢谢您的建议。事实上，我已经试过了——视频标签有点误导；因为它是一个称为“视频”的自定义指令。这只是带来了一个错误：无法获取/%7B%7B%20videoUrl%20%7D%7DDid您是否编写了一个实现视频标记或属性“video”的指令？我认为这个错误就在这个指令中，所以你应该在这里发布这个代码。这里的问题是在调用link函数之前对模板求值并生成DOM。删除模板并在link函数中动态生成它（link函数将元素本身作为DOM对象获取，将声明更改为

link:function（scope，element，attr）{..}

Hi，感谢您的帮助。我已通过将url放入白名单解决了此问题（url保存在我的JSON文件中，然后模板通过iframe将链接拉入。其工作方式与我所需的完全相同。感谢您今天的帮助。：）

<div class="col-md-12">    
    <video src="{{guide.my_video_uri}}">
    </video>
</div>

<video video="{{ guide.video }}">
</video>

guideApp.directive('videoPlayer', function ($sce) {

'use strict';

return {

    restrict: 'E',
    scope: { video: '=' },
    replace: true,
    template: '<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" width="100%" height="100%" src="{{ videoUrl }}" frameborder="0" allowfullscreen></iframe></div>',
    link: function (scope) {
        scope.$watch('videoPlayer', function (videoLink) {
            if (videoLink) {
                scope.videoUrl = $sce.trustAsResourceUrl("https://www.youtube.com/embed/" + videoLink);
            }

        });

    }
};

});