javascript Angular js：在弹出窗口中显示 iframe 并看到一个空框架
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25137866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular js: Display an iframe in a pop up and see an empty frame
提问by Aviade
I am building an angularJs app.
我正在构建一个 angularJs 应用程序。
When i am clicking on a photo i would like that a modal screen will be shown with a player for playing a YouTube clip.
当我点击照片时，我希望显示一个带有播放器的模式屏幕，用于播放 YouTube 剪辑。
When i type it hardcoded everything running fine. However when i get it from the server the iframe is empty.
当我输入它硬编码一切运行正常。但是，当我从服务器获取它时，iframe 为空。
In the 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:
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:
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>
If we put instead{{givenurl}}, ng-src="https://www.youtube.com/embed/3O1_3zBUKM8" It will run fine...
如果我们改为 {{givenurl}}, ng-src="https://www.youtube.com/embed/3O1_3zBUKM8" 它会运行良好...
What am i doing wrong?
我究竟做错了什么？
回答by Aviade
I found the problem. I am using iframe. Angular requires to use $sce when we are using iframe.
我发现了问题。我正在使用 iframe。当我们使用 iframe 时，Angular 需要使用 $sce。
The solution:
解决方案：
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');
};
}]);
Instead of $scope.givenUrl = urlreplace it in $scope.givenUrl = $sce.trustAsResourceUrl(url).
Don't forget to add $sce as a dependency injection.
而不是$scope.givenUrl = url在$scope.givenUrl = $sce.trustAsResourceUrl(url). 不要忘记添加 $sce 作为依赖注入。
回答by Chipe
I have also ran into this recently. Here is my solution using a filter:
我最近也遇到了这个。这是我使用过滤器的解决方案：
Filter:
筛选：
.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}]);
In the HTML:
在 HTML 中：
<iframe width="420" height="315" ng-src="{{PassedInUrlGoesHere | trustAsResourceUrl}}"></iframe>
