7

angular-google-maps モジュールの を使用して、Google マップの InfoWindow 内にリンクを作成しようとしています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;
});

'controller as' 構文を使用しているため、コントローラーの は html テンプレートのようにvm.markers表示されることに注意してください。main.markers

私が見ている問題はdata-ui-sref="display({id: id})"、html の状態が「表示」ページに変更されますが、$stateParams 値としてプッシュされないidことです。これは、何を表示するかわからないため、明らかに良くありません。 .

InfoWindow の外 (結果のリスト) に作成された同じページへの別のリンクがあり、id 値をプッシュします。

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

InfoWindow のリンクを機能させるための助けをいただければ幸いです。

4

3 に答える 3

2

id作用する範囲内で確実に利用できる場合は、.mapinfowindow次を試すことができます：

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

(ソース: https://github.com/angular-ui/ui-router/issues/395#issuecomment-59136525 )

それがうまくいかない場合は、おそらくカスタム ディレクティブが必要になります。

于 2014-12-05T10:18:26.297 に答える
2

値を取得するために使用$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);
}
于 2015-06-30T15:41:33.857 に答える