AngularJS ui-sref on infoWindow not working

Question

The problem is that to click on the name of infoWindow redirection does not work with ui- sref or ng-click inside marker.content

index.html

   <div ng-controller="MapCtrl">
    <div id="mapPage" class="mapPageStyle left" >
     <div id="mapPageContent" style="height:100%;background:#fff;">
      <div id="mapContainer" ng-repeat="marker in markers">
      </div>
     </div>
    </div>
   </div>

controller_map.js (MapCtrl)

function createMarker(info) {

var marker = new google.maps.Marker({
  map: $scope.map,
  position: new google.maps.LatLng(info.lat, info.long),
  title: info.name,
  icon: info.markerImage
});
var myClass = [];
marker.content = '<div id="hook" class="hook" >' +
        '<div class="nameInfoWindow" ui-sref="page_center/comercio({IdBusiness: info.id })">' + info.name + '</div>' +
        '<div style="text-align: center;">' +
        '<div class="ec-stars-wrapper">' +
        '</div>' +
        '</div>' +
        '</div>';

google.maps.event.addListener($scope.map, 'click', function () {
        infoWindow.close();
    });

google.maps.event.addListener(marker, 'click', function () {
  infoWindow.setContent(marker.content);
  infoWindow.open($scope.map, marker);
});

$scope.markers.push(marker);

}

score 0 · Answer 1 · edited May 23 '17 at 12:15

Your example doesn't work because you need to $compile the harcoded template. Here you have a thread talking about compiling html from controller, the second answer talks about "working outside angular scope and expects angular parse the scope", he creates an object wich compiles html&angular dynamic code

AngularHelper.Compile = function ($targetDom, htmlToCompile, applicationName)

Injecting html from controller directly is not a god practice due to performance issues.

It could be better an angular ready implementation like angular maps, with angular maps plugin you could implement something like:

<ui-gmap-google-map
        center='map.center'
        zoom='map.zoom'
        options='options'
        control='map.control'>

    <ui-gmap-markers idKey="'bid'" models="map.markers" coords="'self'">
        <ui-gmap-windows show="show">
            <div ng-controller="MapClickCtrl">
                <h5 ng-non-bindable>{{title}}</h5>
                <button class="button" ng-click="goTo('page')">Detail</button>
            </div>
        </ui-gmap-windows>
    </ui-gmap-markers>

</ui-gmap-google-map>

This is a working example, the method goto() is fired in MapClickCtrl.

AngularJS ui-sref on infoWindow not working

1 Answers1