angular ng-src не работает с iframe

Question

Я совершенно не знаком с угловыми js и пытаюсь создать виджет карты google в Service Portal в ServiceNow, который динамически показывает местоположение пользователя. У меня есть сценарий сервера, который вытягивает и форматирует расположение:

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}}

, адрес загрузится правильно. Кроме того, если я заменил {{data.src}} на реальный адрес (т. Е. Washington + dc), карта правильно отобразит Вашингтон.

Может кто-нибудь помочь мне устранить эту проблему?

Спасибо!

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