我正在尝试使用 angular-google-maps 模块的 ui-gmap-windows
在 Google map 上的信息窗口内创建链接。
在我的 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>
在我的 Controller 中,我有:
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”语法,因此 Controller 中的 vm.markers
显示为 main.markers
在 html 模板中。
我看到的问题是 html 中的 data-ui-sref="display({id: id})"
将状态更改为“显示”页面,但是 < strong>不将 id
作为 $stateParams 值推送,这显然不好,因为我不知道要显示什么..
我有另一个指向同一页面的链接,它是在 InfoWindow 之外创建的(在结果列表中),确实通过 id 值推送:
<div data-ng-repeat="entry in main.itemlist">
<div data-ui-sref="display({id: entry.id})">
我们将非常感谢您提供有关使 InfoWindow 链接正常工作的任何帮助。
最佳答案
根据 https://github.com/angular-ui/angular-google-maps/issues/884 中的信息,我最终解决了这个问题。 :
我为 InfoWindow 创建了一个模板和单独的 Controller ,并将我的 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
。
在主 Controller 中,我输入模板所需的信息:
...
marker.templateUrl = templateUrl;
marker.templateParameter = {
id: item.id,
title: item.name,
href: item.href,
img: vm.lookup_extphoto[item.href] //getting a photo externally
};
...
在 InfoWindow 的模板中,我有:
<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) {
}
})();
关于javascript - 如何将值从 ui-gmap-windows InfoWindow/Marker 传递到 ui-sref?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27308371/