Eu estou montando uma diretiva para renderizar um iframe do google maps dentro da minha app.
E consegui fazer desta forma:
<google-iframe location="item.Location"></google-iframe>
diretiva.js
function googleIframe() {
var directive = {
restrict: 'E',
replace: true,
transclude: true,
scope: {
location: '='
},
template: '<iframe src="%url%" height="250" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" alt="{{location.url}}"></iframe>',
link: link
};
return directive;
function link(scope, element) {
var url = [
'https://www.google.com/maps/embed/v1/place?',
'key=AIzaSyCBOhDJn9LAUiqONa-y-f1l2JmFEoadkaQ',
'&q=', scope.location.lat, ',', scope.location.lng,
'&zoom=', scope.location.zoom
];
element[0].outerHTML = element[0].outerHTML.replace('%url%', url.join(""));
}
Porém, o que eu gostaria de verdade, é renderizar a url correta em conjunto com a diretiva, ao invés de substituir a url após a renderização da diretiva.
Alguém tem alguma idéia?