InfoWindow上的AngularJS ui-sref无法正常工作

时间:2015-11-24 13:46:31

标签: angularjs ionic-framework

问题是单击infoWindow重定向的名称不能用于标记内的ui- sref或ng-click

的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);

}

1 个答案:

答案 0 :(得分:0)

您的示例不起作用,因为您需要$compile已编码的模板。 Here you have一个讨论从控制器编译html的线程,第二个答案谈到&#34;在角度范围外工作并期望角度解析范围&#34;,他创建了一个编译html&amp; angular动态代码的对象

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

由于性能问题,直接从控制器中注入html并不是一种上帝的做法。

angular maps这样的角度就绪实现可能会更好一些,角度贴图插件可以实现类似:

<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>

这是一个工作示例,方法goto()在MapClickCtrl中触发。