How Do I Pass A Value From A Ui-gmap-windows InfoWindow/Marker To Ui-sref?

Question

I am trying to create a link inside an InfoWindow on a Google Map, using the angular-google-maps module's ui-gmap-windows. In my HTML template, I have:

Solution 1:

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

Solution 2:

If id is definitely available within the scope acting on .mapinfowindow you could try:

Baca Juga

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

Solution 3:

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

javascript dox

How Do I Pass A Value From A Ui-gmap-windows InfoWindow/Marker To Ui-sref?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "How Do I Pass A Value From A Ui-gmap-windows InfoWindow/Marker To Ui-sref?"