我有一个url视频链接(http://www.youtube.com/watch?v=myvideoid)从我的数据库中,我想使用angular嵌入到我的框架中。
我试过下面的代码,但不起作用
<iframe width="200" height="300" ng-src="http://www.youtube.com/embed/{{v_link}}" frameborder="0" allowfullscreen></iframe>
其中{{v_link}}
是在mysql数据库中存储视频的列。有任何帮助请
您得到的错误是$interpolate:noconcat
。它指出:
当需要可信值时,严格上下文转义不允许连接多个表达式的插值。来源
这意味着您必须使用$sce并将所需的URL标记为可信URL这将解决您的问题:
angular
.module('myApp', [])
.controller('MainCtrl', function($sce) {
this.youtubeLink = $sce.trustAsResourceUrl('https://www.youtube.com/embed/N4ony2r0QFs');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl as vm">
<iframe width="560" height="315" ng-src="{{ vm.youtubeLink }}" frameborder="0" allowfullscreen></iframe>
</div>
另一种方法,如本答案所述,是创建一个专门为信任youtube URL而构建的自定义过滤器:
.filter('youtubeEmbedUrl', function ($sce) {
return function(videoId) {
return $sce.trustAsResourceUrl('https://www.youtube.com/embed/' + videoId);
};
});
只要你想嵌入视频,你就会使用这个过滤器,比如ng-src="{{ vm.youtubeLink | youtubeEmbedUrl }}"
。
使用$sce,您可以将所需的URL设置为可信URL:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
});
app.filter('trustUrl', function($sce) {
return function(url) {
return $sce.trustAsResourceUrl(url);
};
});
app.directive('youtubePlayer', function() {
return {
restrict: 'E',
scope: {
header: '@',
video: '@'
},
transclude: true,
replace: true,
template: '<iframe ng-src="{{video | trustUrl}}"></iframe>',
link: function(scope, element, attrs) {
scope.header = attrs.header;
}
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS App</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<youtube-player video="https://www.youtube.com/embed/ZzlgJ-SfKYE" header="Url Description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</youtube-player>
</body>
</html>