Question

我正在制作一个拉入YouTube视频的项目。

最初这是与Angular的旧版本（v1.0.6）一起使用，但是，当使用最新版本（v1.2 +）时，我在控制台中出现错误，导致视频无法加载

感谢任何有用的信息。

Error: [$interpolate:noconcat] http://errors.angularjs.org/1.2.26/$interpolate/noconcat?p0=%2F%2Fwww.youtube.com%2Fembed%2F%7B%7Bvideo.videoid%7D%7D

这是标记。

 <html ng-app="myApp" >

  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js" ></script>

  </head>

  <body ng-controller="Mycontroller" >

     <ul>
       <li ng-repeat="video in videos">
       <iframe width="560" height="315" ng-src="//www.youtube.com/embed/{{video.videoid}}" frameborder="0" allowfullscreen></iframe>
       </li>
    </ul>


  </body>

JS

<script>

var myApp = angular.module('myApp', []);

myApp.controller('Mycontroller', function ($scope) {
 $scope.videos = [
    {'videoid': 'X03_bNuihLU'},
    {'videoid': 'X03_bNuihLU'},
    {'videoid': 'X03_bNuihLU'}
 ];

});

</script>

Answer 1

您需要使用$sce.trustAsResourceUrl

myApp.controller('Mycontroller', function ($scope, $sce) {
  $scope.videos = [
    {'videoid': 'X03_bNuihLU'},
    {'videoid': 'X03_bNuihLU'},
    {'videoid': 'X03_bNuihLU'}
 ];

 $scope.getVideoUrl = function(url) {
     return $sce.trustAsResourceUrl("//www.youtube.com/embed/" + url);
 }

 <iframe width="560" height="315" ng-src="{{getVideoUrl(video.videoid)}}" frameborder="0" allowfullscreen></iframe>

使用Angular JS加载iframe src - 错误

1 个答案: