显示来自AngularJS的Google Maps iFrame

Show Google Maps iFrame from AngularJS

本文关键字：Google Maps iFrame AngularJS 显示      更新时间：2023-09-26

我构建了一个wordpress插件，用户可以在其中插入谷歌地图代码，如下所示：

<iframe src="https://www.google.com/maps/embed?pb=xxxxx" width="100%" height="100%" frameborder="0" style="border:0"></iframe>

这段代码存储在WP数据库中，我尝试从我的AngularJS代码中获取它。

getMaps();  
function getMaps(){ 
    $http.post("wp-content/themes/koplan/pages/getMaps.php").success(function(mapsdata){
        $scope.maps = mapsdata;
    });
};

我的问题是：如何在前端 php/html 中绑定/渲染 iframe？ 我已经尝试过<div ng-bind-html=maps>但没有任何结果。

还有其他办法吗？？请帮助我，谢谢

可能你需要的是 sce，因为我想你的 iframe 不被接受为受信任的 HTML。

因此，在将 sce 包含在您的控制器中后，例如

app.controller("MainController", ['$scope', '$http','$sce', function($scope, $http, $sce){

，你会做的 

$scope.maps = $sce.trustAsHtml(mapsdata);

另请参阅此问题/答案。

此外，对于您确定可以"安全"显示的其他 HTML 数据，您可以使用以下过滤器：

app.filter('unsafe', function($sce) {
   return function(val) {
      return $sce.trustAsHtml(val);
   };
});

您可以将其与 

ng-bind-html="yourHTMLdataVariable | unsafe"
相关文章：