Javascript Angular js：在弹出窗口中显示一个iframe，并看到一个空帧

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

当我点击一张照片时，我希望一个模式屏幕会显示一个播放YouTube视频的播放器

当我打字时，一切都很顺利。 但是，当我从服务器获取它时，iframe是空的

在控制器中

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" 它会运行良好

我做错了什么？

我发现了问题。 我正在使用iframe。Angular在使用iframe时需要使用$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作为依赖项注入。

我最近也遇到过这种情况。以下是我使用过滤器的解决方案：

过滤器：

.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}]);

在HTML中：

<iframe width="420" height="315" ng-src="{{PassedInUrlGoesHere | trustAsResourceUrl}}"></iframe>

您是否使用依赖项注入来传递url？你能把它做成plnkr吗？相似的东西……是的，这有点相似。为了找到问题的解决方案，如果您可以使用JSFIDLE重现您的问题，那就太好了……很高兴看到angular handles安全问题：）@Aviade，您可以为上述解决方案添加JSFIDLE吗

<iframe width="420" height="315" ng-src="{{PassedInUrlGoesHere | trustAsResourceUrl}}"></iframe>