下面的代码片段用于在我的页面中嵌入 Youtube 视频。
<div ng-if="videoUrl != ''" style="height:400px;">
<iframe width="100%" height="100%" src="{{videoUrl}}"></iframe>
</div>
在我的 Controller 中,videoUrl
首先设置为空字符串,并在从服务器检索数据后更新。
$scope.videoUrl = '';
videoService.getData().then(function(response) {
$scope.videoUrl = response.videoUrl;
});
Youtube 播放器工作正常并且 URL 正确,页面完全加载后我可以使用嵌入式播放器观看视频。令我困扰的是每次加载页面时都会返回错误。我可以从浏览器控制台看到它正在尝试向 http://www.example.com/%7B%7BvideoUrl%7D%7D
发送 GET
请求其状态为(已取消)
。这个请求不是我想要的,它肯定会失败。
如何摆脱那个奇怪的 GET
请求?
最佳答案
我根据 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
请求。
关于javascript - 在 AngularJS 中嵌入 Youtube 视频在加载页面时会产生错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28273611/