Angularjs I'；我正在尝试使用API和Angular 1.5在页面上填充youtube视频

我的目标是用特定频道的youtube视频填充页面。在Angular 1.5中，这并不像将youtube视频Id添加到youtube链接的末尾那么简单。我查了几个样品，但还是不起作用。有人能帮我吗？谢谢大家!

控制器

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

}

}());

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

 }
}());

（函数（）{
"严格使用",；
角模（‘theWell’）
.controller（'MediaController'，MediaController）
.config（函数（$sceDelegateProvider）{
$sceDelegateProvider.resourceUrlWhitelist([
“自我”，
'https://www.youtube.com/**'
]);
});
MediaController.$inject=['$http']
函数MediaController（$http）{
var vm=这个；
vm.videos={}
vm.links=[]
$http({
方法：“GET”，
网址：'http://localhost:3000/api/mediaRequest'
}).then（功能（youtubeData）{
vm.videos=youtubeData.data
var items=vm.videos.items
对于（变量i=0；i

HTML

媒体

我想出来了

控制器

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

}

}());

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

 }
}());

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>