时间戳

首页 > 解决方案 > 带有 Bootstrap 的 AngularJS 动态 Youtube 视频

angularjs - 带有 Bootstrap 的 AngularJS 动态 Youtube 视频

问题描述

毕业后，我刚开始在一家小型软件开发公司担任前端开发人员。我之前从未使用过任何框架，现在我们使用AngularJs的是（计划在未来更改为 Angular）。我的导师现在很忙，所以我正在寻找外部帮助，解决我的编码问题。

我想分享的问题是：我正在尝试制作一个可以从另一个页面播放动态 Youtube视频的Bootstrap 模态弹出窗口。如果没有 Bootstrap 模态弹出窗口，它可以动态工作（但很难看），我能够使用 Bootstrap Modal，但只能使用静态 Youtube 链接。

说明：我们有引导卡，如果连接了 youtube 视频，则其中包含一个 youtube 视频播放按钮。如果视频出现，应该可以播放，但不存在。Youtube 视频嵌入在 SQL 中，C# 文件将其提供给视图。

我怎样才能更改我的代码以使其工作（也包括其他尝试，可能有人会对他们有一个好主意）？

不幸的是，我不能分享所有内容，但我会尽可能地解释它。

使用的技术: ASP.Net, C#, AngularJs, BootStrap.

我要更改的代码：

 <div ng-repeat="man in manuals">


    <div class="Title text-info"> {{man.GroupName}} </div>

    <div class="row">
        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-3 mh-100" ng-repeat="m in man.Items">

            <div class="card bg-dark shadow-sm" style="height:250px;">

                <div class="card-body ebp-bg-cover" style="background-image: url('../../Content/Image/BackGrounds/doc_bg_{{manuals.indexOf(man)%4+1}}B.jpg');">
                    <h4 class="font-weight-bold">{{m.Name}} <span ng-if="m.NewDocument" class="text-warning float-right">@OMFPage.New</span> </h4> //Text from a .resx file

                    </a>


                    @*
                       // Working but it is not Pop-Up
                        
                        <a ng-href="{{m.YouTubeVideo}}" ng-show="m.YouTubeVideo!=undefined">
        <img src="~/Content/Image/Logos/eniac_play.png" class="ebp_UserManuals_youtube" />
    </a>*@ /*Shows the icon only if the field contains value */



                    <div ng-show="m.YouTubeVideo!=undefined">

                    
                    <img class="ebp_UserManuals_youtube" src="~/Content/Image/Logos/playbutton.png"
                         data-toggle="modal" data-target="#e_YoutbeVideoModal" title="Play Video" /></div>
               

                    <div class="modal fade" id="ebp_YoutbeVideoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content" style="padding: 0px; border:none; ">
                                <div class="modal-header bg-dark">
                                    <h5 class="modal-title" id="exampleModalLabel">YT video</h5>
                                    <button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>

                                <div class="modal-body bg-dark">

                                  @*<iframe class="e-youtube-player" id="ebp_Youtube" width="560" height="315" ng-src="{{m.YouTubeVideo}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>*@ 
                                  


                                        <div ng-controller="MainCtrl">
                                            @*Dont leave two controllers in it*@
                                            <youtube-player video="{{m.YouTubeVideo}}" header="Url Description">
                                             
                                            </youtube-player>
                                       



                                    </div>

<script>


app.controller('MainCtrl', function($scope) {

});

app.filter('trustUrl', function($sce) {
  return function(url) {
    return $sce.trustAsResourceUrl(url);
  };
});

app.directive('youtubePlayer', function() {
  return {
    restrict: 'E',
    scope: {
      header: '@@',
      video: '@@'
    },
    transclude: true,
    replace: true,
    template: '<iframe ng-src="{{video | trustUrl}}"></iframe>',
    link: function(scope, element, attrs) {
      scope.header = attrs.header;
    }
  };
});
</script>

例子

问题

如果您有任何问题，请随时提出，我将用它来扩展描述。

标签： angularjsbootstrap-4

解决方案

ng-repeat从设计的角度来看，不建议在标签下创建模态。您可以简单地将项目传递给一个变量，ng-click并仅使用一种引导模式来显示 Youtube 视频。

例如，

<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-3 mh-100" ng-repeat="m in man.Items">
  <button ng-click="showYoutubeVideo(m)"></button>

并在您的模态窗口中使用变量

<youtube-player video="{{selectedVideo.YouTubeVideo}}" header="Url Description">
</youtube-player>

在您的角度控制器上，只需将参数分配给变量selectedVideo，它就会起作用

推荐阅读