我有点问题.我正在开发一个投资组合网站,它应该根据存储在网站中的网址自动列出所有类型的内容json.我在阵列下面有这一行videos.
"url": "https://www.youtube.com/watch?v=4ZHwu0uut3k",
"date": "2016-05-11"
我必须使用这个方案,因为我在其他地方使用不同形式的链接.没问题,我想,我去实现一个过滤器.
.filter("GetYouTubeID", function ($sce) {
return function (text) {
var video_id = text.split('v=')[1].split('&')[0];
return video_id;
}
})
所以我转到我的HTML,我开始 ng-repeat
<div class="media z-depth-1" ng-repeat="video in videos | orderBy: '-date'" style="padding:20px">
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/{{video.url | GetYouTubeID}}" frameborder="0" allowfullscreen></iframe>
<p>Display output for control reasons: {{video.url | GetYouTubeID}}</p>
</div>
</div>
这一切都应该有效,对吗？但事实并非如此.为什么？我无法理解这一点.完全没有.请帮忙？
在SimonSchüpbach发表评论后,我尝试了以下内容,但无济于事:
.filter("GetYouTubeID", function ($sce) {
return function (text) {
var video_id = text.split('v=')[1].split('&')[0];
var ytembed = 'https://www.youtube.com/embed/';
var complete_id = ytembed + video_id;
return complete_id;
}
})
我认为可能在过滤器中构建整个URL可能很聪明.
<div class="media z-depth-1" ng-repeat="video in video| orderBy: '-date' | filter: 'video'" style="padding:20px">
<div>
<iframe width="560" height="315" ng-src="{{video.url | GetYouTubeID}}" frameborder="0" allowfullscreen></iframe>
<p>{{video.url | GetYouTubeID}}</p>
</div>
</div>
这一次,我的应用程序似乎看到它应该嵌入一些东西,但视频应该是一个空白区域.但是,底部的控制输出是正确的.
我已经坐立不安了,按照这个帖子中的建议.然而,没有任何效果.如果我将完整的嵌入URL放入重复元素,则会显示视频.我总结说,这个问题在重复的某个地方.
所以我决定看看Chrome的"检查元素"输出.这是它给出的:
<iframe width="560" height="315" frameborder="0" allowfullscreen=""></iframe>
你看到缺少什么？的src.所以有些东西会削减它.
我在底部显示的控制网址始终与正确的Youtube嵌入网址匹配.
在@bahadirT建议之后,我尝试了以下方法:
在我的IndexController中:
$scope.getProperURL = function (videoURL) {
var video_id = videoURL.split('v=')[1].split('&')[0];
return "https://www.youtube.com/embed/" + video_id;
}
在我的HTML中:
<iframe width="560" height="315" src={{getProperURL(video.url)}} frameborder="0" allowfullscreen></iframe>
<p>Display output for control reasons: {{video.url | GetYouTubeID}} </p>
<p>Function URL: {{getProperURL(video.url)}}</p>
现在你认为这样可行,因为带有功能URL的行显示正确的URL.然而!当我向它抛出ngRepeat时,Console给了我一些错误.所有都归档于[$interpolate:interr]
at Error (native)
at http://127.0.0.1:58561/bower_components/angular/angular.min.js:6:412
at Function.Ja.interr (http://127.0.0.1:58561/bower_components/angular/angular.min.js:209:135)
at H (http://127.0.0.1:58561/bower_components/angular/angular.min.js:104:156)
at Array.<anonymous> (http://127.0.0.1:58561/bower_components/angular/angular.min.js:128:176)
at R.exp (http://127.0.0.1:58561/bower_components/angular/angular.min.js:105:277)
at pre (http://127.0.0.1:58561/bower_components/angular/angular.min.js:79:130)
at ja (http://127.0.0.1:58561/bower_components/angular/angular.min.js:80:350)
at n (http://127.0.0.1:58561/bower_components/angular/angular.min.js:65:341)
at g (http://127.0.0.1:58561/bower_components/angular/angular.min.js:58:305)
即便如此,即使我的内容安全策略位于单页应用程序主管中,也是如此:
jquery.min.js:3The Content Security Policy 'child-src *;' was delivered via a <meta> element outside the document's <head>, which is disallowed. The policy has been ignored.
我的代码在这个jsfiddle链接上工作:
js side [编辑]:
var app = angular.module("app", []);
app.controller("controller", function ($scope) {
$scope.videos = [
{
"url": "https://www.youtube.com/watch?v=6vE0oFFSE7c",
"date": "2016-05-11"
},
{
"url": "https://www.youtube.com/watch?v=6vE0oFFSE7c",
"date": "2016-05-11"
}
];
});
app.filter('trusted', ['$sce', function ($sce) {
return function(url) {
var video_id = url.split('v=')[1].split('&')[0];
return $sce.trustAsResourceUrl("https://www.youtube.com/embed/" + video_id);
};
}]);
html端[编辑]:
<div ng-controller="controller">
<div ng-repeat="video in videos | orderBy: '-date'" style="padding:20px">
<div>
<iframe width="560" height="315" ng-src="{{video.url | trusted}}"
frameborder="0" allowfullscreen></iframe>
<p>Display output for control reasons: {{video.url | trusted}}</p>
</div>
</div>
</div>
编辑:我已经更新了代码,现在正在使用过滤器.我所做的是用"$ sce.trustAsResourceUrl()"标记网址.从这里找到解决方案.
| 归档时间： |
|
| 查看次数： |
6578 次 |
| 最近记录： |