angularjs - 我正在尝试使用API​​和Angular 1.5用youtube视频填充页面

Question

我的目标是用特定 channel 的youtube视频填充页面。在Angular 1.5中，这不像在YouTube链接的末尾添加youtube视频ID那样简单。我查了几个样本，但仍然无法使用。有人能帮我吗？谢谢!

控制者

  (function() {
'use strict';

  angular.module('theWell')
  .controller('MediaController', MediaController)
  .config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
      'self',
      'https://www.youtube.com/**'
    ]);
  });

  MediaController.$inject = ['$http']

  function MediaController ($http) {
  var vm = this;
  vm.videos = {}
  vm.links = []

  $http({
  method: 'GET',
  url: 'http://localhost:3000/api/mediaRequest'
  }).then(function (youtubeData) {
    vm.videos = youtubeData.data
    var items = vm.videos.items
    for(var i = 0; i < items.length; i++) {
      vm.links.push(items[i].id.videoId)
    }
  }, function (response) {
    console.log(response)

  });

  vm.getIframeSrc = function(links) {
    return 'https://www.youtube.com/embed/' + links;
  };

    console.log(vm.links)

}

}());

的HTML

<div>
  <h1 class="center">Media</h1>
</div>

<div ng-repeat="link in MediaVm.links">
  <iframe width="100%" ng-src="{{getIframeSrc(link)}}" frameborder="0 " allowfullscreen></iframe>
</div>

Answer 1

我想到了!

控制者

  (function() {
  'use strict';

  angular.module('theWell')
  .controller('MediaController', MediaController)


  MediaController.$inject = ['$http']

  function MediaController ($http) {
  var vm = this;
  vm.videos = {}
  vm.links = []

  $http({
  method: 'GET',
  url: 'http://localhost:3000/api/mediaRequest'
  }).then(function (youtubeData) {
    vm.videos = youtubeData.data
    var items = vm.videos.items
    for(var i = 0; i < items.length; i++) {
      vm.links.push(items[i].id.videoId)
    }
  }, function (response) {
    console.log(response)

  });

  vm.getIframeSrc = function(src) {
    return 'https://www.youtube.com/embed/' + src;
  };

    console.log(vm.links)

 }
}());

App.js

(function() {
  'use strict';
  angular.module('theWell', ['ui.router'])
  .config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
  'self',
  'https://www.youtube.com/**'
    ]);
  });
}());

的HTML

<div>
  <h1 class="center">Media</h1>
</div>

<div ng-repeat="link in MediaVm.links">
  <div class="vidFrame">
    <iframe width="100%" height="500px" ng-src="   {{MediaVm.getIframeSrc(link)}}" frameborder="0" allowfullscreen></iframe>
  </div>
</div>