0

I'm using an ng-map in my markup like this:

<ng-map>
    <div ng-repeat="loc in mapsCtrl.locations">
       <marker position="{{loc.position}}" title="{{loc.address}}" on-click="mapsCtrl.showDetails(event, {{loc}})">
       </marker>
    </div>
    <info-window id="cached" template="{{mapsCtrl.infoWindowTemplate}}"></info-window>
</ng-map>

... and in my mapsCtrl, the 'showDetails' method is being successfully called when the marker is clicked. Here's the control class:

(function() {

    class mapsCtrl {
        constructor(NgMap, mapsSrv, UserInfo) {
            this.NgMap = NgMap;
            ...
        }

        showDetails(event, loc) {
            this.NgMap.showInfoWindow('cached', this);
        }

... but in my 'showDetails', 'this' now refers to the marker and I can't access NgMap. How do I reference NgMap?

UPDATE:

OK, so I've found that for this specific use case, since I have a reference to the marker, this works, in showDetails:

showDetails(event, loc) {
   this.map.showInfoWindow('cached', this);
}

I'm still not clear though on why 'this' refers to the marker and not the control. Can someone please explain what's happening there?

Chris Halcrow
  • 28,994
  • 18
  • 176
  • 206
  • 1
    It looks like what is happening is that your on-click event is acting like a jQuery click event and is passing a reference to the HTML element the event is bound to instead of the class reference. I have never used NgMap though, so just a thought. – Michael Doye Aug 11 '17 at 07:30
  • Thanks. Shouldn't 'this' in a class member always refer to the class though? This is what's confusing me. – Chris Halcrow Aug 11 '17 at 07:46
  • Normally, yes. Maybe changing to `ng-click` would work as expected. – Michael Doye Aug 11 '17 at 07:49

0 Answers0