AngularJS листовка GetMap() не работает

Question

После добавления листовки к моему AngularJS приложению:

<leaflet id="map" defaults="defaults" center="center" bounds="bounds" controls="controls" event-broadcast="events"></leaflet> 

И настраивая это:

// Initialise the feature group to store editable layers 
var drawnItems = new L.FeatureGroup(); 

// Initialise the draw control 
var drawControl = new L.Control.Draw({ 
    position: 'topright', 
    edit: { 
     featureGroup: drawnItems 
    } 
}); 

// Configure Leaflet 
angular.extend($scope, { 
    defaults: { 
     zoomControlPosition: 'topright', 
     minZoom: 3, 
     tileLayerOptions: { 
      detectRetina: true, 
      reuseTiles: true, 
      attribution: '<a href="http://osm.org">OpenStreetMaps</a>' 
     } 
    }, 
    center: {}, 
    controls: { 
     custom: [drawControl] 
    }, 
    events: { 
     map: { 
      enable: ['click'] 
     } 
    } 
}); 

После этого кода он не получает оцениваемый (нет показанная ошибка):

leafletData.getMap().then(
    function (map) { 
     alert('I have accessed the map.'); 
    } 
); 

Это должно показать мне предупреждение сразу, хотя ничего не происходит.

Если я задерживаю этот предыдущий код, например, запуская его в функции при нажатии кнопки, он работает!

Кто-нибудь знает, что может быть проблемой?

Видя пример, он должен работать: https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/control-draw-example.html

ЧАСТИЧНО решаемые

Удаление ID из leaflet HTML тега решить эту проблему. Должна быть ошибка.

Answer 1

Предполагается передать id, указанный в теге <leaflet>, функции getMap().

В вашем примере идентификатор map. Вы бы передали это следующим образом:

leafletData.getMap("map").then(
    function (map) { 
     alert('I have accessed the map.'); 
    } 
);