为什么硬编码 YouTube 视频 ID 有效，但使用变量却不行？答案

【问题标题】：Why does hard coding a YouTube video id work, but using a variable does not?为什么硬编码 YouTube 视频 ID 有效，但使用变量却不行？
【发布时间】：2016-08-07 14:42:49
【问题描述】：

我是 Angular 的新手。

我一直在尝试将 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>

【问题讨论】：

控制台是否显示任何错误？见this
@EvikJames，我的回答对你有用吗？

标签： angularjs youtube

【解决方案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:

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

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

【讨论】：

在哪里创建过滤器？在哪个文件中？应用程序？模块？组件？
@EvikJames，你能检查它作为答案吗？
我刚刚开始工作。我试图弄清楚它是如何以及为什么起作用的。
我不明白你的意思.. 你是说我的回答不起作用？
你的回答帮助我让它工作。我必须弄清楚该过滤器的确切放置位置。这是我的组件...github.com/EvikJames/Evik-James-Dot-Com/blob/master/show-video/…