在 AngularJS 中嵌入 Youtube 视频会在加载页面时产生错误

Question

下面的代码片段用于在我的页面中嵌入 Youtube 视频。

<div ng-if="videoUrl != ''" style="height:400px;">
    <iframe width="100%" height="100%" src="{{videoUrl}}"></iframe>
</div>

在我的控制器中，videoUrl 首先设置为空字符串，并在从服务器检索数据后更新。

$scope.videoUrl = '';

videoService.getData().then(function(response) {
    $scope.videoUrl = response.videoUrl;
});

Youtube 播放器正常运行，URL 正确，我可以在页面完全加载后使用嵌入式播放器观看视频。困扰我的是每次加载页面时，都会返回一个错误。我可以从浏览器控制台看到它试图向 http://www.example.com/%7B%7BvideoUrl%7D%7D 发送一个 GET 请求，其状态为 (canceled)。这个请求不是我想要的，肯定会失败。

我怎样才能摆脱那个奇怪的 GET 请求？

Answer 1

我根据 RGraham 的建议修改了我的代码，现在错误消失了。

首先，将src改为ng-src，检查条件改为ng-if="videoUrl"。

<div ng-if="videoUrl" style="height:400px;">
    <iframe width="100%" height="100%" ng-src="{{videoUrl}}"></iframe>
</div>

其次，我将videoUrl初始化为undefined。

$scope.videoUrl = undefined;

现在页面加载时不再发送之前奇怪的 GET 请求。

在 AngularJS 中嵌入 Youtube 视频会在加载页面时产生错误

Embed Youtube video in AngularJS generates error when loading the page

javascript

youtube

iframe

angularjs