How do I pass a value from a ui-gmap-windows InfoWindow/Marker to ui-sref? How do I pass a value from a ui-gmap-windows InfoWindow/Marker to ui-sref? angularjs angularjs

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