![如何将值从]( "如何将值从")
本文介绍了如何将值从 ui-gmap-windows InfoWindow/Marker 传递给 ui-sref?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 angular-google-maps 模块的 ui-gmap-windows 在 Google 地图上的 InfoWindow 内创建链接.
在我的 HTML 模板中，我有:
<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>
</ui-gmap-windows></ui-gmap-markers></ui-gmap-google-map>
在我的控制器中，我有:
uiGmapGoogleMapApi.then(function(maps) {vm.itemlist = search.getItemList();var 标记 = [];_.each(vm.itemlist,function(item){search.getGeometry(item.href).then(function(marker) {标记.title = item.en;标记.id = item.href;标记.showWindow = false;标记.选项 = {标题: item.en,图标:markericon.normal};marker.onClick = function() { vm.markerClick(marker);};marker.closeClick = function() { vm.markerCloseClick(marker);};标记.推(标记)；});});vm.markers = 标记；});
注意，我使用的是controller as"语法，因此控制器中的 vm.markers 显示为 main.markers在 html 模板中.
我看到的问题是 html 中的 data-ui-sref="display({id: id})" 将状态更改为显示"页面，但是 不会将 id 作为 $stateParams 值推送，这显然不好，因为我不知道要显示什么..
我有另一个指向同一页面的链接，它是在信息窗口之外(在结果列表中)创建的，并且确实推送了 id 值:
<div data-ui-sref="display({id: entry.id})">
非常感谢您帮助使 InfoWindow 的链接正常工作.
解决方案
根据 https://github.com/angular-ui/angular-google-maps/issues/884:
我为 InfoWindow 创建了一个模板和单独的控制器，并将我的 HTML 更改为:
<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.
在主控制器中，我输入模板所需的信息:
...标记.templateUrl = templateUrl;标记.模板参数 = {id: item.id,标题:项目名称，href: item.href,img: vm.lookup_extphoto[item.href]//从外部获取照片};...在信息窗口的模板中，我有:
<div class="mapinfowindow" data-ui-sref="display({id: parameter.id})"><div class="previewimage-container"><img data-ng-attr-src="{{:: parameter.img }}">
<span>{{:: parameter.title }}</span>
infowindowTemplateController 本身几乎是空的:
(function(){'使用严格';有角的.module('myapp').controller('infowindowTemplateController', infowindowTemplateController);infowindowTemplateController.$inject=['$scope'];函数 infowindowTemplateController ($scope) {}})();
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:
<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>
In my controller, I have:
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;
});
Note that I'm using the 'controller as' syntax, so the vm.markers in the controller appears as main.markers in the html template.
The problem I'm seeing is that the data-ui-sref="display({id: id})" in the html changes the state to the 'display' page, but does not push through the id as a $stateParams value, which is obviously not good, as I won't know what to display..
I have another link to the same page, created outside the InfoWindow (in a list of results), and the does push through the id value:
<div data-ng-repeat="entry in main.itemlist">
<div data-ui-sref="display({id: entry.id})">
Any help with getting the InfoWindow's link working will be very much appreciated.
解决方案
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) {
}
})();
这篇关于如何将值从 ui-gmap-windows InfoWindow/Marker 传递给 ui-sref?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！