我正在开发一个引入 YouTube 视频的项目。
最初，这是与旧版本的 Angular (v1.0.6) 一起使用的，但是，当使用最新版本 (v1.2+) 时，我在控制台中收到错误，导致视频无法加载
感谢任何有帮助的信息。
Error: [$interpolate:noconcat] http://errors.angularjs.org/1.2.26/$interpolate/noconcat?p0=%2F%2Fwww.youtube.com%2Fembed%2F%7B%7Bvideo.videoid%7D%7D
这是标记。
<html ng-app="myApp" >
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js" ></script>
</head>
<body ng-controller="Mycontroller" >
<ul>
<li ng-repeat="video in videos">
<iframe width="560" height="315" ng-src="//www.youtube.com/embed/{{video.videoid}}" frameborder="0" allowfullscreen></iframe>
</li>
</ul>
</body>
JS
<script>
var myApp = angular.module('myApp', []);
myApp.controller('Mycontroller', function ($scope) {
$scope.videos = [
{'videoid': 'X03_bNuihLU'},
{'videoid': 'X03_bNuihLU'},
{'videoid': 'X03_bNuihLU'}
];
});
</script>
最佳答案
您需要使用$sce.trustAsResourceUrl
myApp.controller('Mycontroller', function ($scope, $sce) {
$scope.videos = [
{'videoid': 'X03_bNuihLU'},
{'videoid': 'X03_bNuihLU'},
{'videoid': 'X03_bNuihLU'}
];
$scope.getVideoUrl = function(url) {
return $sce.trustAsResourceUrl("//www.youtube.com/embed/" + url);
}
<iframe width="560" height="315" ng-src="{{getVideoUrl(video.videoid)}}" frameborder="0" allowfullscreen></iframe>
关于javascript - 使用 Angular JS 加载 iframe src - 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26678123/