AngularJS нг клик не стрелять с помощью окна угловой Google-Maps'

Question

Я хотел, чтобы автоматически центрировать карту к местоположению пользователя после загрузки, так что я использовал $scope.$apply() после загрузки геолокации, как показано в моем TestCtrl в controller.js здесь:

$scope.drawMap = function(position) {         
     $scope.$apply(function() { 
     $scope.myLocation.lng = position.coords.longitude; 
     $scope.myLocation.lat = position.coords.latitude; 

     $scope.map = { 
      center: { 
       latitude: $scope.myLocation.lat, 
       longitude: $scope.myLocation.lng 
      }, 
      zoom: 14, 
      events: { 
       click: $scope.clickCallback 
      } 
     };       
    }); 
}; 

navigator.geolocation.getCurrentPosition($scope.drawMap); 

$scope.test = function(){ 
    alert("hola"); 
}; 

$scope.clickCallback Используется для ввода новых маркеров на карту по событию клика.

// inside TestCtrl 
var markers = [], counter = 1; 
$scope.clickCallback = function(map, eventName, event){       
    var lat = event[0].latLng.lat(); 
    var lng = event[0].latLng.lng(); 

    markers.push(createNewMarker(counter, lat, lng));   

    $scope.$apply(function(){ 
     $scope.newMarker = markers;   
    });  
    counter++;    
}; 

Как вы можете видеть, что есть еще одна $scope.$apply там, чтобы применить новый маркер/с.

createNewMarker() Определены модели маркеров (ui-gmap-markers).

// still inside TestCtrl 
var createNewMarker = function(i, lat, lng, idKey) { 

    if (idKey == null) { 
     idKey = "id"; 
    } 
    var foo = "<h4>New Marker</h4><form><input type='text' placeholder='Event name' name='name'></input> <input type='button' value='submit'></input><input type='button' ng-click='test()' value='Delete marker'></input></form>"; 
    var bar = $compile(foo)($scope); 
    var ret = { 
     latitude: lat, 
     longitude: lng,    
     show: true, 
     options: { 
      draggable: true, 
      animation: google.maps.Animation.DROP, 
     },    
     windows: { 
      title: "New Marker", 
     }, 
     windowsOptions: {  
      content: foo, 
     } 
    }; 
    ret[idKey] = i; 
    return ret; 
}; 

Теперь маркер показывает хорошо, когда я нажимаю на карте, включая окна, но когда я нажимаю на кнопку Delete marker, моя $scope.test() функция не розжига. Я попытался использовать $compile, но он возвращает кучу ошибок около $scope.

Вот мой шаблон:

<ion-content scroll="false"> 
    <ui-gmap-google-map center='map.center' zoom='map.zoom' bounds="map.bounds" events="map.events"> 
    <ui-gmap-markers models="newMarker" coords="'self'" icon="'icon'" options="'options'"> 
     <ui-gmap-windows show="show" options="'windowsOptions'"> 
     </ui-gmap-windows> 
    </ui-gmap-markers> 
    </ui-gmap-google-map> 
</ion-content> 

Любой, кто знаком с этим сценарием? Я использую Ionic Framework btw.

Answer 1

Это не должен быть этот комплекс.

Как создатель ngMap, я рекомендовал бы это,

http://ngmap.github.io/drawings.html#/marker-remove#marker-remove

Чтобы установить текущее местоположение, просто используйте current-location

<map center="current-location" zoom="12" on-click="addMarker()"> 
    <marker ng-repeat="pos in positions" position="{{pos.lat}}, {{pos.lng}}"></marker> 
</map> 

http://plnkr.co/edit/e1SioHQ6NTSYCp0EbR0x?p=preview