Question

我是角色的新手。

我一直在努力将YouTube视频嵌入我的新AngularJS网站。我有一个json数组视频信息，我能够循环输出。

我想输出视频ID并制作嵌入式视频。它不起作用。

我在这里做错了什么？为什么我不能只在iframe中输出视频ID？

'use strict';

angular.
   module('showVideo').
     component('showVideo', {
     templateUrl: 'show-video/show-video.template.html',
     controller: function ShowVideoController() {
      this.videos = [

     {
       name: 'Rush - Kid Gloves - Guitar Solo Cover - 50% speed',
       videoid: 'c-8OsVuqoCg'
     }, 

     {
       name: 'Van Halen - Unchained - Guitar Cover',
       videoid: 'Z9n0oIBz8SE'
     }, 

     {
       name: 'Extreme - More Than Words - Guitar Cover',
       videoid: 'gMJcE4kWelE'
     }
    ];
  }
});


<div ng-repeat="video in $ctrl.videos">
   <span>{{video.name}}</span>
   <span>{{video.videoid}}</span>

   <!-- this works as expected -->
   <iframe type="text/html" width="640" height="360" 
            ng-src="https://www.youtube.com/embed/Z9n0oIBz8SE" frameborder="0" allowfullscreen></iframe>

   <!-- this does not work -->
   <iframe type="text/html" width="640" height="360" 
            ng-src="https://www.youtube.com/embed/{{video.videoid}}" frameborder="0" allowfullscreen></iframe>

</div>

---更新

我倾向于在转储这些值时看到一些东西。我什么也看不见。

        <h1>{{$sce.isEnabled()}}</h1>
        <h1>{{encodeURI(video.videourl)}}</h1>
        <h1>{{$sce.trustAsUrl(video.videourl)}}</h1>
        <h1>{{$sce.RESOURCE_URL(video.videourl)}}</h1>

Answer 1

您应该创建一个filter，如下所示：

.filter('trustUrl', trustUrl);

trustUrl.$inject = ['$sce'];

function trustUrl($sce) {
  return function(videoId) {
    if (!videoId) return;
    return $sce.trustAsResourceUrl('http://www.youtube.com/embed/' + videoId);
  }
}

然后，在视图：

中

ng-src="{{ video.videoid | trustUrl }}"

完成code：

＆＃13;

(function() {
  'use strict';

  angular
    .module('showVideo', [])
    .component('showVideo', {
      template: 
        `<div ng-repeat="video in $ctrl.videos">
          <span ng-bind="video.name"></span>
          <span ng-bind="video.videoid"></span>
          <iframe type="text/html" width="640" height="360"
          ng-src="{{ video.videoid | trustUrl }}" frameborder="0" allowfullscreen></iframe>
        </div>`,
      controller: ShowVideoController
    })
    .filter('trustUrl', trustUrl);

  function ShowVideoController() {
    this.videos = [
      {
        name: 'Rush - Kid Gloves - Guitar Solo Cover - 50% speed',
        videoid: 'c-8OsVuqoCg'
      },
      {
        name: 'Van Halen - Unchained - Guitar Cover',
        videoid: 'Z9n0oIBz8SE'
      },
      {
        name: 'Extreme - More Than Words - Guitar Cover',
        videoid: 'gMJcE4kWelE'
      }
    ];
  }

  trustUrl.$inject = ['$sce'];

  function trustUrl($sce) {
    return function(videoId) {
      if (!videoId) return;
      return $sce.trustAsResourceUrl('http://www.youtube.com/embed/' + videoId);
    }
  }
})();

＆＃13;

<!DOCTYPE html>
<html ng-app="showVideo">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body>
  <show-video></show-video>
</body>

</html>

＆＃13;

为什么对YouTube视频ID进行硬编码是有效的，但使用变量却不行？

1 个答案: