如何将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); 
}