我正在嘗試使用API​​和Angular 1.5填充YouTube視頻頁面

Question

我的目標是使用特定頻道的YouTube視頻填充頁面。在Angular 1.5中，這並不像在youtube上添加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) 

} 

}()); 

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>