Skip to content

Commit 7d57629

Browse files
allenhwkimallenhwkim
committed
Merge pull request allenhwkim#583 from harm-less/master
New feature: Info window external template
2 parents 2598781 + 46fdea5 commit 7d57629

File tree

3 files changed

+107
-25
lines changed

3 files changed

+107
-25
lines changed

‎directives/info-window.js‎

Lines changed: 40 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
(function() {
5151
'use strict';
5252

53-
var infoWindow = function(Attr2MapOptions, $compile, $timeout, $parse, NgMap) {
53+
var infoWindow = function(Attr2MapOptions, $compile, $q, $templateRequest, $timeout, $parse, NgMap) {
5454
var parser = Attr2MapOptions;
5555

5656
var getInfoWindow = function(options, events, element) {
@@ -74,31 +74,46 @@
7474
}
7575

7676
/**
77-
* set template ane template-relate functions
77+
* set template and template-related functions
7878
* it must have a container element with ng-non-bindable
7979
*/
80-
var template = element.html().trim();
81-
if (angular.element(template).length != 1) {
82-
throw "info-window working as a template must have a container";
83-
}
84-
infoWindow.__template = template.replace(/\s?ng-non-bindable[='"]+/,"");
80+
var templatePromise = $q(function(resolve) {
81+
if (angular.isString(element)) {
82+
$templateRequest(element).then(function (requestedTemplate) {
83+
resolve(angular.element(requestedTemplate).wrap('<div>').parent());
84+
}, function(message) {
85+
throw "info-window template request failed: " + message;
86+
});
87+
}
88+
else {
89+
resolve(element);
90+
}
91+
}).then(function(resolvedTemplate) {
92+
var template = resolvedTemplate.html().trim();
93+
if (angular.element(template).length != 1) {
94+
throw "info-window working as a template must have a container";
95+
}
96+
infoWindow.__template = template.replace(/\s?ng-non-bindable[='"]+/,"");
97+
});
8598

8699
infoWindow.__open = function(map, scope, anchor) {
87-
$timeout(function() {
88-
anchor && (scope.anchor = anchor);
89-
var el = $compile(infoWindow.__template)(scope);
90-
infoWindow.setContent(el[0]);
91-
scope.$apply();
92-
if (anchor && anchor.getPosition) {
93-
infoWindow.open(map, anchor);
94-
} else if (anchor && anchor instanceof google.maps.LatLng) {
95-
infoWindow.open(map);
96-
infoWindow.setPosition(anchor);
97-
} else {
98-
infoWindow.open(map);
99-
}
100-
var infoWindowContainerEl = infoWindow.content.parentElement.parentElement.parentElement;
101-
infoWindowContainerEl.className = "ng-map-info-window";
100+
templatePromise.then(function() {
101+
$timeout(function() {
102+
anchor && (scope.anchor = anchor);
103+
var el = $compile(infoWindow.__template)(scope);
104+
infoWindow.setContent(el[0]);
105+
scope.$apply();
106+
if (anchor && anchor.getPosition) {
107+
infoWindow.open(map, anchor);
108+
} else if (anchor && anchor instanceof google.maps.LatLng) {
109+
infoWindow.open(map);
110+
infoWindow.setPosition(anchor);
111+
} else {
112+
infoWindow.open(map);
113+
}
114+
var infoWindowContainerEl = infoWindow.content.parentElement.parentElement.parentElement;
115+
infoWindowContainerEl.className = "ng-map-info-window";
116+
});
102117
});
103118
};
104119

@@ -115,11 +130,11 @@
115130
var options = parser.getOptions(filtered, {scope: scope});
116131
var events = parser.getEvents(scope, filtered);
117132

133+
var infoWindow = getInfoWindow(options, events, options.template || element);
118134
var address;
119135
if (options.position && !(options.position instanceof google.maps.LatLng)) {
120136
address = options.position;
121137
}
122-
var infoWindow = getInfoWindow(options, events, element);
123138
if (address) {
124139
NgMap.getGeoLocation(address).then(function(latlng) {
125140
infoWindow.setPosition(latlng);
@@ -132,7 +147,7 @@
132147
mapController.addObject('infoWindows', infoWindow);
133148
mapController.observeAttrSetObj(orgAttrs, attrs, infoWindow);
134149

135-
mapController.showInfoWindow =
150+
mapController.showInfoWindow =
136151
mapController.map.showInfoWindow = mapController.showInfoWindow ||
137152
function(p1, p2, p3) { //event, id, marker
138153
var id = typeof p1 == 'string' ? p1 : p2;
@@ -194,7 +209,7 @@
194209

195210
}; // infoWindow
196211
infoWindow.$inject =
197-
['Attr2MapOptions', '$compile', '$timeout', '$parse', 'NgMap'];
212+
['Attr2MapOptions', '$compile', '$q', '$templateRequest', '$timeout', '$parse', 'NgMap'];
198213

199214
angular.module('ngMap').directive('infoWindow', infoWindow);
200215
})();

‎testapp/infowindow-template.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!doctype html>
2+
<html ng-app="myapp">
3+
<head>
4+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
5+
<script src="script-tags-for-development.js"></script>
6+
<script>
7+
var app = app || angular.module('myapp', ['ngMap']);
8+
app.controller('MyCtrl', function($compile, NgMap) {
9+
var vm = this;
10+
NgMap.getMap().then(function(map) {
11+
vm.map = map;
12+
});
13+
vm.template = {
14+
cached: 'custom-cached-info-window-template.html',
15+
external: '/testapp/partials/custom-info-window-template.html'
16+
};
17+
vm.stores = {
18+
foo: {
19+
position:[41, -87],
20+
infoWindow: 'cached',
21+
items: [1,2,3,4]
22+
},
23+
foo2: {
24+
position:[41, -80],
25+
infoWindow: 'external',
26+
items: [5,6,7,8]
27+
}
28+
};
29+
vm.showStore = function(evt, storeId) {
30+
vm.store = vm.stores[storeId];
31+
vm.map.showInfoWindow(vm.store.infoWindow, this);
32+
};
33+
});
34+
</script>
35+
</head>
36+
<body ng-controller="MyCtrl as vm">
37+
38+
<script id="custom-cached-info-window-template.html" type="text/ng-template">
39+
<div ng-non-bindable="">
40+
I'm an cached template<br/>
41+
Lat: {{anchor.getPosition().lat()}}<br/>
42+
Lng: {{anchor.getPosition().lng()}}<br>
43+
<ul>
44+
<li ng-repeat='item in vm.store.items'>{{item}}</li>
45+
</ul>
46+
</div>
47+
</script>
48+
49+
<ng-map default-style="true" center="41,-87" zoom="3">
50+
51+
<info-window id="cached" template="{{vm.template.cached}}"></info-window>
52+
<info-window id="external" template="{{vm.template.external}}"></info-window>
53+
54+
<marker ng-repeat="(id, store) in vm.stores" id="{{id}}"
55+
position="{{store.position}}"
56+
on-click="vm.showStore(event, id)"></marker>
57+
</ng-map>
58+
</body>
59+
</html>

‎testapp/partials/custom-info-window-template.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div ng-non-bindable="">
2+
I'm an external template<br/>
3+
Lat: {{anchor.getPosition().lat()}}<br/>
4+
Lng: {{anchor.getPosition().lng()}}<br>
5+
<ul>
6+
<li ng-repeat='item in vm.store.items'>{{item}}</li>
7+
</ul>
8+
</div>

0 commit comments

Comments
 (0)