我正在制作一个拉入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>
答案 0 :(得分:2)
您需要使用$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>