Question

我有点问题。我正在投资组合网站上，它应该根据存储在ListView中的网址自动列出所有类型的内容。我在数组json下面有这一行。

videos

我必须使用这个方案，因为我在其他地方以不同的形式使用链接。没问题，我想，我去实现一个过滤器。

"url": "https://www.youtube.com/watch?v=4ZHwu0uut3k",
"date": "2016-05-11"

所以我转到我的HTML，然后从.filter("GetYouTubeID", function ($sce) { return function (text) { var video_id = text.split('v=')[1].split('&')[0]; return video_id; } })

开始

ng-repeat

这一切都应该有效，对吧？但事实并非如此。为什么？我无法理解这一点。完全没有。请帮帮忙？

编辑＃1

在SimonSchüpbach发表评论后，我尝试了以下内容，但无济于事：

    <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>

我认为在过滤器中构建整个网址可能很聪明。

.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;
  }
})

这一次，我的应用似乎看到它应该嵌入一些内容，但视频应该是一个空白区域。但是，底部的控制输出是正确的。

编辑＃2

我已经坐立不安了，按照这个帖子中的建议。然而，没有任何效果。如果我将完整的嵌入URL放入重复元素，则会显示视频。所以问题就在重复的某个地方，我总结道。

所以我决定查看Chrome的“检查元素”输出。这是它给出的：

 <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>

你看到缺少什么？ <iframe width="560" height="315" frameborder="0" allowfullscreen=""></iframe>。src。所以有些东西会削减它。

我在底部显示的控制网址始终与正确的Youtube嵌入网址匹配。

编辑＃3

@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.

Answer 1

我的代码适用于此jsfiddle link：

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 side [编辑]：

<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（）”标记网址。找到here的解决方案。

Answer 2

也许你有一些访问限制。

添加正确的内容安全策略以允许您使用。

 <meta http-equiv="Content-Security-Policy" content="child-src *;">

编辑1

我不知道你的例子出了什么问题，但这个傻瓜有效 https://plnkr.co/edit/9FWWsK2Yuf6ivh55w5Uo?p=preview

Answer 3

＆＃13;

app.filter('trusted', ['$sce', function ($sce) {
	return function(url) {
		return $sce.trustAsResourceUrl(url);
	};
}]);
and use filter in ng-repeat its working
<iframe ng-src="{{x.url | trusted}}"></iframe>

＆＃13;

使用ngRepeat嵌入YouTube视频

编辑＃1

编辑＃2

编辑＃3

3 个答案: