Question

我正在构建一个angularJs应用程序。

当我点击一张照片时，我想要一个模拟屏幕显示一个播放器来播放YouTube剪辑。

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

在控制器中

$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作为依赖注入。

Angular js：在弹出窗口中显示iframe并查看空框架

1 个答案: