javascript - Angular js : Display an iframe in a pop up and see an empty frame

Question

我正在构建一个 angularJs 应用。

当我点击一张照片时，我希望会显示一个模态屏幕，其中包含用于播放 YouTube 剪辑的播放器。

当我输入硬编码时，一切都运行良好。但是，当我从服务器获取它时，iframe 是空的。

在 Controller 中

$scope.openVideoPlayerPopup = function (videoUrl) {
        var modalInstance = $modal.open({
            templateUrl: 'common/partials/videoPlayerModalScreen.html',
            controller: 'VideoPlayerModalCtrl',
            resolve: {
                url: function () {
                  return videoUrl;
                }
            }
        });

        modalInstance.result.then(function () {

        }, function () {
            console.log('Modal dismissed at: ' + new Date());
        });
    }; 

VideoPlayerModalController:

elbitApp.controller('VideoPlayerModalCtrl', ['$scope', '$modalInstance', 'url',
                                     function ($scope, $modalInstance,url) {

    $scope.givenUrl =  url;                        

    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

videoPlayerModalScreen.html:

<div class="modal-header">
    <h3 class="modal-title">Video Player</h3>
</div>
<div class="modal-body-video">
    <iframe width="420" height="345" ng-src='{{givenUrl}}'></iframe>
    <!--"https://www.youtube.com/embed/3O1_3zBUKM8"-->
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

如果我们改为{{givenurl}}，ng-src="https://www.youtube.com/embed/3O1_3zBUKM8"它会运行良好...

我做错了什么？

Answer 1

我发现了问题。我正在使用 iframe。当我们使用 iframe 时，Angular 要求使用 $sce。

解决方法:

app.controller('VideoPlayerModalCtrl', ['$scope', '$modalInstance', '$sce', 'url',
                                     function ($scope, $modalInstance, $sce, url) {


    $scope.givenUrl =  $sce.trustAsResourceUrl(url);

    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

将 $scope.givenUrl = url 替换为 $scope.givenUrl = $sce.trustAsResourceUrl(url)。不要忘记添加 $sce 作为依赖项注入(inject)。