Angularjs 使用ng repeat的多个JWPlayer

我可能用了错误的方法，但我正在尝试创建一个垂直滚动的网页，其中包含多个视频。每个视频的数据都来自我后端的一个端点，我想使用ng repeat为每个视频生成一个jwplayer

我现在得到的是：

<div id="repeatingvids" ng-repeat="video in retrieved_videos">
    <div id="jwplayer{{$index}}">
    </div>
    <script type="text/javascript">
      jwplayer("jwplayer{{$index}}").setup({
        file: {{retrieved_videos[{{$index}}].video_url}},
        type: 'mp4',
        width: '100%',
        aspectratio: '16:9',
        controls: 'true',
        }
      });
    </script>
</div>

现在，在有人说什么之前，我完全知道脚本标记中的代码是垃圾，那些数据绑定标记是完全无效的，我只是把它们放在那里，让大家知道我要完成什么

我最初尝试在http成功回调中设置所有jwplayer，循环遍历结果，但由于$http.get的异步性质，ng repeat在加载时无法循环遍历，在回调后加载页面导致jwplayer（'element'）。设置未定义，因为元素当然不存在

---

所以我陷入困境，任何帮助都将不胜感激

您必须在一页中包含angular和jwplayer。 如果您有jwplayer的密钥，只需按照通常的方式根据他们的文档将其包括在内

<script type="text/javascript" src="/scripts/jwplayer.js" ></script>
<script type="text/javascript">jwplayer.key="YOUR_JW_PLAYER_KEY";</script>

将元素添加到页面中，并将“setup”属性设置为在控制器中设置的变量。通过设置player id变量为元素提供一个id也是一个好主意

<div ng-controller='HomeCtrl'>  
    <jwplayer setup="options"></jwplayer>
</div>

---

您是否有一个示例链接，指向运行此功能的位置？请参阅angular jwplayer，这可能会让您更进一步：也就是说，我自己也有问题。。。

angular.module('myApp').controller('HomeCtrl', ['$scope', function($scope) {

    $scope.options = {
        file: "pathToMyVideo/myvideo.mp4",
        image: "pathToMyImage/image.jpg", // optionnal
        height: 360,
        width: 640
    };

}]);

<div ng-controller='HomeCtrl'>  
    <jwplayer setup="options"></jwplayer>
</div>