如何將ui-gmap-windows InfoWindow/Marker的值傳遞給ui-sref？

Question

我想創建一個谷歌地圖信息窗口中的鏈接，使用角谷歌，地圖模塊的ui-gmap-windows。

在我的HTML模板，我有：

<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'" ng-cloak> 
      <div class="mapinfowindow" data-ui-sref="display({id: id})">                  
       <span class="itemname" data-ng-non-bindable>{{ title }}</span> 
      </div> 
     </ui-gmap-windows> 
    </ui-gmap-markers> 
</ui-gmap-google-map> 

在我的控制，我有：

uiGmapGoogleMapApi.then(function(maps) { 
    vm.itemlist = search.getItemList();                             
    var markers = []; 
    _.each(vm.itemlist,function(item){ 
    search.getGeometry(item.href).then(function(marker) { 
     marker.title  = item.en; 
     marker.id   = item.href; 
     marker.showWindow = false; 
     marker.options = { 
          title: item.en, 
          icon: markericon.normal 
          }; 
     marker.onClick = function() { vm.markerClick(marker); }; 
     marker.closeClick = function() { vm.markerCloseClick(marker); }; 
     markers.push(marker); 
    }); 
    }); 
    vm.markers = markers; 
}); 

注意，我使用了 '控制器' 的語法，所以控制器中的vm.markers在html模板中顯示爲main.markers。

我看到的問題是，在HTML中的data-ui-sref="display({id: id})"改變狀態到「顯示」頁面，但通過id不推爲$ stateParams值，這顯然是不好的，因爲我不知道要顯示什麼..

我有另一個鏈接到同一頁面，信息窗口之外創建的（在結果列表），以及確實擠過id的值：

<div data-ng-repeat="entry in main.itemlist"> 
    <div data-ui-sref="display({id: entry.id})"> 

獲得I的任何幫助非常感謝nfoWindow的鏈接工作。

Answer 1

這裏是我結束瞭解決這一問題的基礎上，https://github.com/angular-ui/angular-google-maps/issues/884發現信息：

我創建了信息窗口的模板和單獨的控制器，並改變了我的HTML：

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

由於你可以看到，現在有兩個新的參數：templateUrl和templateParameter。

在主控制器，我的信息，我需要爲模板飼料：

... 
marker.templateUrl = templateUrl; 
marker.templateParameter = { 
          id: item.id, 
          title: item.name, 
          href: item.href, 
          img: vm.lookup_extphoto[item.href] //getting a photo externally 
          }; 
... 

在信息窗口的模板，我有：

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

的infowindowTemplateController本身是相當多的空：

(function(){ 
    'use strict'; 

    angular 
     .module('myapp') 
     .controller('infowindowTemplateController', infowindowTemplateController); 

     infowindowTemplateController.$inject=['$scope']; 
     function infowindowTemplateController ($scope) { 
     } 
})(); 

Answer 2

如果id是作用於.mapinfowindow範圍之內絕對可以，你可以嘗試：

<div class="mapinfowindow" data-ui-sref="display({id: '{{id}}'})"> 

（來源：https://github.com/angular-ui/ui-router/issues/395#issuecomment-59136525）

如果不工作，你可能需要一個定製指令。

Answer 3

使用$parent來獲得該值。

模板：

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

控制器：

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