从 AngularJS 显示 Google Maps iFrame

Question

我已经构建了一个 wordpress 插件，用户可以在其中插入像这样的谷歌地图代码：

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

此代码存储在 wp-database 中，我尝试从我的 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>，但什么也没出现。

还有什么办法吗？？请帮助我，谢谢

Answer 1

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

因此，在将 sce 包含到您的控制器中之后

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

，你会做的

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

另请参阅this 问题/答案。

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

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

你可以使用它

ng-bind-html="yourHTMLdataVariable | unsafe"