Question

在我的角度应用程序中，我有嵌入式视频列表，我想在我的视图中显示此嵌入式视频。我的代码如下：

Angular arrayList

 .filter('unsafe', function() {
      return function(url) {
          var newUrl =  url.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
          return newUrl ;
      }
 })



controller('', function($scope) { 

    $scope.videoLink = [
      '<iframe width="560" height="315" src="https://www.youtube.com/embed/cwXfv25xJUw" frameborder="0" allowfullscreen></iframe>',
      '<iframe width="560" height="315" src="https://www.youtube.com/embed/cKJvScGB5Ak" frameborder="0" allowfullscreen></iframe>',
      '<iframe width="560" height="315" src="https://www.youtube.com/embed/W9xtFtOA7_8" frameborder="0" allowfullscreen></iframe>'
    ];

 });

html视图

  <div ng-repeat="url in videoLink">
       <!-- {{url}} --> <!-- only show plain text -->

       <!-- <div ng-html-bind='url'></div> --> <!-- nothing shown --> 

       <!-- {{url | unsafe}} --> <!-- only show plain text -->
  </div>

我该如何解决这个问题？

Answer 1

而不是将包含HTML元素集合的videoLink数组作为字符串，您是否可以将该列表包含YouTube嵌入的URL？看起来iframe元素的其余部分完全相同。

如果您这样做，那么我相信以下内容可行：

<div ng-repeat="url in videoLink">
    <iframe width="560" height="315" src="{{url | unsafe}}" frameborder="0" allowfullscreen></iframe>
</div>

Answer 2

您可以使用我的响应式youtube指令：https://github.com/Citrullin/angular-responsive-youtube

我只使用$ scope和$ sce作为网址。在你的例子中。您可以创建一个范围变量，用于保存所有youtube网址。在您的视图中，您可以在指令中使用ng-repeat：

Answer 3

我在此解决方案中使用了过滤器，请查看以下代码。

Html

  var app = angular.module('myapp', []);
    app.controller("mycontroll",function($scope){
        $scope.videos=[
            'https://www.youtube.com/embed/Pdaw-ipnPPc',
            'https://www.youtube.com/embed/OssRAVZhsRk',
            'https://www.youtube.com/embed/gf6lhGV6DNs',
            'https://www.youtube.com/embed/Pdaw-ipnPPc',
            'https://www.youtube.com/embed/OssRAVZhsRk',
            'https://www.youtube.com/embed/gf6lhGV6DNs'
        ];
    });
    app.filter('trustAsResourceUrl', ['$sce', function($sce) {
        return function(val) {
            return $sce.trustAsResourceUrl(val);
        };
    }])

<强> JS

sed -E 's/(([0-9]+\.){3}[0-9]+):[0-9]+/\1/' file

在angularjs中嵌入视频

3 个答案: