2014-11-06 53 views
2

我使用ngmaps(https://github.com/allenhwkim/angularjs-google-maps)在我的應用程序中動態加載標記和infoWindows。AngularJS ngmap將範圍變量傳遞給infoWindow

在我看來

它看起來像這樣:

<marker 
    data-ng-repeat="ltd in ltds" 
    data-position="{{ltd.gps}}" 
    data-title="{{ltd.code}}" 
    data-draggable="false" 
    data-visible="true" 
    data-icon="images/marker.png" 
    data-on-click="showInfoWindow(event, ltd.code)"> 
</marker> 

<info-window data-ng-repeat="ltd in ltds" id="{{ltd.code}}" data-position="{{ltd.gps}}" data-ltd="{{ltd}}"> 
    <div ng-non-bindable> 
     <div class="infoWindow"> 
      <div class="content">code: {{ltd.code}}</div> 
     </div> 
    </div> 
</info-window> 

但在信息窗口內容{{ltd.code}}沒有顯示。我究竟做錯了什麼?

回答

2

從DIV

從文檔https://docs.angularjs.org/api/ng/directive/ngNonBindable刪除ng-non-bindable指令:

的ngNonBindable指令告訴角度不編譯或結合當前的DOM元素的 內容。如果元素 包含似乎是Angular指令和綁定,但Angular應忽略哪些 ,這很有用。例如,如果您有一個顯示代碼片段的 網站,則可能會出現這種情況。

6

上述解決方案並沒有爲我工作,我認爲它有一些關於NG地圖版本

所以我寫了我的解決方案: http://plnkr.co/edit/eEE9tX4PlDstCeiQI6x2?p=preview

 $scope.showInfoWindow = function (event, p) { 
     var infowindow = new google.maps.InfoWindow(); 
     var center = new google.maps.LatLng(p[0],p[1]); 

     infowindow.setContent(
      '<h3>' + p + '</h3>'); 

     infowindow.setPosition(center); 
     infowindow.open($scope.objMapa); 
    };` 

我創建信息窗口點擊事件,然後我完全控制了信息窗口

1

我是這樣找到的:

模板:

<marker ng-repeat="marker in markers" position="{{marker.location.latitude}}, {{marker.location.longitude}}" on-click="showDetails(event, marker.id)"></marker> 
       <info-window id="details"> 
       <div ng-non-bindable=""> 
        <h4>Aja {{ecopoint.name}}</h1> 
        <p>{{ecopoint.details}}</p> 
        <a ng-click="next(ecopoint)" translate>Seleccionar</a> 
       </div> 
       </info-window> 

控制器:

$scope.showDetails = function(evt, id) { 

    var ecopointSearch = $filter('filter')($scope.markers, { id: id }); 

    $scope.ecopoint = ecopointSearch[0]; 

    $scope.showInfoWindow.apply(this, [evt, 'details']); 
    }; 
+0

我覺得這是某種欺騙,但相比於其他例子,如果它不能正常工作該死的完美 – 2016-04-25 17:13:17

相關問題