将 iframe 插入 Angular 应用程序

Question

我有一个包含视频列表的应用，我不想在用户选择视频然后选择播放时一次加载所有视频（是的，这是一个两步过程）。

因此，当用户选择一个视频时，我试图仅将该视频的 iframe 播放器嵌入到所选元素中。

在我的控制器中，我有

$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，并且控制器中包含了 ngSanitize。

Answer 1

我认为你做错了。也就是说，如果您真的想像您尝试的那样输出 html，则不推荐使用 ng-bind-html-unsafe ，就像您所说的那样。新的做法是注入 $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 代替？这样您就可以交换该视图的内容（内容是 iframe）。

http://docs.angularjs.org/api/ngRoute/directive/ngView

希望对你有帮助！