首页 文章

将iframe插入角度应用程序

提问于
浏览 次
1

我有一个带有视频列表的应用程序，我不想一次加载所有视频，只是当用户选择视频然后选择播放时（是的，这是一个两步过程） .

因此，当用户选择视频时，我尝试仅将该视频的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放入页面 .

我正在使用角度版本1.2.15，并且我在控制器中包含了ngSanitize .

javascript angularjs iframe

1 回答

  • 1

    我认为你正在努力，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

    希望能帮助到你！

    回复于

相关问题