embeded Video in angularjs

Question

In meiner eckigen App habe ich eine Liste von eingebetteten Videos, und ich möchte dieses eingebettete Video aus meiner Sicht zeigen. Mein Code ist unten angegeben:

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-Ansicht

<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> 

Wie kann ich dieses Problem lösen ???

Answer 1

Anstatt das VideoLink-Array, das eine Sammlung von HTML-Elementen als Zeichenfolgen enthält, könnten Sie stattdessen einfach die Liste der eingebetteten YouTube-URLs erstellen? Es sieht so aus, als ob der Rest der iframe-Elemente genau gleich ist.

Wenn du das getan hast, dann glaube ich, folgendes funktionieren würde:

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

Answer 2

Sie meine reaktions youtube-Direktive benutzen: https://github.com/Citrullin/angular-responsive-youtube

Früher habe ich nur $ Umfang und $ sce für die URL. In Ihrem Beispiel. Sie können eine Bereichsvariable erstellen, in der Sie alle Ihre Youtube-URLs speichern. Aus Ihrer Sicht können Sie ng-repeat und innerhalb der Direktive verwenden:

Answer 3

Ich Filter für diese Lösung verwendet, überprüfen Sie bitte den folgenden Code.

Html

<div class="container" ng-controller = "mycontroll"> 
    <div class="col-md-4" ng-repeat="video in videos track by $index"> 
     <div class="embed-responsive embed-responsive-16by9"> 
     <iframe width="420" height="315" ng-src="{{video|trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe> 
     </div> 
    </div> 
</div><!-- container end --> 

JS

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); 
     }; 
    }])