Question

我对angular js是全新的，我正在尝试在ServiceNow中的Service Portal中构建一个谷歌地图小部件，动态显示用户的工作位置。我有一个服务器脚本来拉取和格式化位置：

var gr = new GlideRecord('cmn_location');
gr.addQuery('sys_id', gs.getUser().getLocation());
gr.query();
if(gr.next())
{
var loc = gr.street.getHTMLValue();
}

loc1 = loc.replace(/,/g, "");
loc2 = loc1.replace(/ /g, "+");

data.src = loc2;

我的HTML看起来像这样：

<div class = "map-container">
    <iframe ng-src='https://www.google.com/maps/embed/v1/place?key=AIzaSyCmoLpiJFrdXLLUYsM3PRfPD0zQ0uATAUw&q={{data.src}}'></iframe>
</div>

iframe和{{data.src}}无法协同工作。如果我拿走代码的iframe部分并将其替换为

，则地址会正确加载。此外，如果我用真实地址（即华盛顿+直流）替换{{data.src}}，地图会正确显示华盛顿特区。

有人可以帮我解决这个问题吗？

谢谢！

Answer 1

您可以在控制器中定义一个函数并将URL传递给它，

 routerApp.controller('AppCtrl', ['$scope','$sce', function($scope,$sce) {
     $scope.trustSrc = function(src) {
         return $sce.trustAsResourceUrl(src);
 }

<强> HTML

<iframe ng-src="{{trustSrc(https://www.google.com/maps/embed/v1/place?key=AIzaSyCmoLpiJFrdXLLUYsM3PRfPD0zQ0uATAUw&q={{data.src}})}}'></iframe>

demo

角度ng-src无法使用iframe

1 个答案: