如何使用Angular动态添加iframe-src

How to dynamically add an iframe src with Angular

本文关键字：添加 iframe-src 动态 Angular 何使用      更新时间：2023-09-26

我遇到了一个Error: $interpolate:interr Interpolation Error，它动态地将youtube视频放入iframe中。

html

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="{{youtubeVideo}}" allowfullscreen></iframe>
</div>

Javascript/Angular

$http({
    method: 'GET',
    url: getTankVideos(query)
}).then(function successCallback(response) {
    console.debug('response');
    console.debug(response);
    $scope.youtube = response;
    console.log('Youtube');
    console.log($scope.youtube);
    console.log('Video Url');
    $scope.youtubeVideo = 'https://www.youtube.com/watch?v=' + $scope.youtube.data.items[0].id.videoId;
    console.log($scope.youtubeVideo);
}, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

我的调试语句给了我有效的值

response
script.js:129 Object {data: Object, status: 200, config: Object, statusText: ""}
script.js:131 Youtube
script.js:132 Object {data: Object, status: 200, config: Object, statusText: ""}
script.js:134 Video Url
script.js:135 https://www.youtube.com/watch?v=BRtj_TSOHjw

为了安全起见，您需要在控制器中注入$sce服务，并在其中注入trustAsResourceUrl url。

$scope.youtubeVideo = $sce.trustAsResourceUrl('https://www.youtube.com/watch?v=' + $scope.youtube.data.items[0].id.videoId);
相关文章：