我有一个带有视频列表的应用程序,我不想在用户选择视频然后选择播放时立即加载所有视频(是的,这是一个两步过程)。
因此,当用户选择视频时,我尝试仅将该视频的 iframe 播放器嵌入到所选元素中。
在我的 Controller 中,我有
$scope.selectedVideo = function(index){
if($scope.activeVideo===index)return; // preventing bubbling from closeSelected (I hope)
if($scope.activeVideo !== null){
$scope.closeSelected();
}
var video = $scope.videos[index];
video.embed = '<span><iframe src="https://www.youtube.com/embed'+video.id+'"></iframe> does something show?</span>';
video.active = true;
$scope.activeVideo=index;
}
在我的 html 中,我有
<div ng-bind-html="video.embed"></div>
我已经尝试了各种ng-bind-html-unsafe
(我认为已弃用),但实际上没有任何方法将 iframe 放入页面中。
我使用的是 Angular 版本 1.2.15, Controller 中包含 ngSanitize。
最佳答案
我认为你的做法是错误的。也就是说,如果您确实想像您想要的那样输出 html,那么 ng-bind-html-unsafe 已被弃用,就像您所说的那样。新的方法是注入(inject) $sce 并使用 trustAsHtml
http://docs.angularjs.org/api/ng/service/$sce
你可以像这样制作一个过滤器:
app.filter('unsafe', ['$sce',
function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
}
]);
然后在 HTML 中执行以下操作:
<div ng-bind-html="video.embed | unsafe"></div>
不确定video
是否真的属于范围?但实际上听起来你做错了。您是否尝试过使用 ng-view 来代替?这样您就可以交换该 View 的内容(该内容是 iframe)。
http://docs.angularjs.org/api/ngRoute/directive/ngView
希望对你有帮助!
关于javascript - 将 iframe 插入 Angular 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22779871/