How do I pass a value from a ui-gmap-windows InfoWindow/Marker to ui-sref?
Here is how I ended up solving this issue, based on info found in https://github.com/angular-ui/angular-google-maps/issues/884 :
I created a template and separate controller for the InfoWindow, and changed my HTML to:
<ui-gmap-google-map center='main.map.center' zoom='main.map.zoom' options='main.map.options'> <ui-gmap-markers models="main.markers" coords="'self'" icon="'icon'" options="'options'" click="'onClick'" fit="true"> <ui-gmap-windows show="'showWindow'" closeClick="'closeClick'" templateUrl="'templateUrl'" templateParameter="'templateParameter'" ng-cloak> </ui-gmap-windows> </ui-gmap-markers></ui-gmap-google-map>
As you can see, there are two new parameters now: templateUrl
and templateParameter
.
In the main controller, I feed in the info I need for the template:
...marker.templateUrl = templateUrl;marker.templateParameter = { id: item.id, title: item.name, href: item.href, img: vm.lookup_extphoto[item.href] //getting a photo externally };...
In the InfoWindow's template, I have:
<div data-ng-controller="infowindowTemplateController"> <div class="mapinfowindow" data-ui-sref="display({id: parameter.id})"> <div class="previewimage-container"> <img data-ng-attr-src="{{:: parameter.img }}"> </div> <span>{{:: parameter.title }}</span> </div> </div>
The infowindowTemplateController itself is pretty much empty:
(function(){ 'use strict'; angular .module('myapp') .controller('infowindowTemplateController', infowindowTemplateController); infowindowTemplateController.$inject=['$scope']; function infowindowTemplateController ($scope) { }})();
If id
is definitely available within the scope acting on .mapinfowindow
you could try:
<div class="mapinfowindow" data-ui-sref="display({id: '{{id}}'})">
(Source: https://github.com/angular-ui/ui-router/issues/395#issuecomment-59136525)
If that doesn't work, you'll probably need a custom directive.
Use $parent
to get the value.
Template:
<ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords"> <ui-gmap-window ng-cloak> <a ui-sref="details({ id : $parent.marker.id })">Go!</a> </ui-gmap-window></ui-gmap-marker>
Controller:
for (var i = 0; i < mArray.length; i++) { var marker = { id : mArray[i]._id, coords : { latitude : mArray[i].address.latitude, longitude : mArray[i].address.longitude } }; $scope.markers.push(marker);}