AngularJS - Leaflet - Die Eigenschaft "center" ist im Hauptbereich nicht definiert

Question

Ich habe flaglet.js korrekt eingerichtet und die Karte wird wie erwartet in meiner App gerendert. Ich bekomme jedoch immer die folgende Fehlermeldung: The "center" property is not defined in the main scope. Was mache ich falsch?

Aus meiner Sicht:

<leaflet markers="markers" center="osloCenter"></leaflet> 

In meinem Controller:

function MapCtrl($scope) { 
    angular.extend($scope, { 
      osloCenter: { 
       lat: 59.91, 
       lng: 10.75, 
       zoom: 12 
     }, 
     markers: { 
      osloMarker: { 
       lat: 59.91, 
       lng: 10.75, 
       focus: true, 
       draggable: false 
      } 
     defaults: { 
      scrollWheelZoom: false 
     } 
    }); 
}; 

Ich habe auch versucht, die folgenden:

 scope.osloCenter = { 
      lat : 59.91, 
      lng : 10.75, 
      zoom : 12 
     }; 

     $scope.osloMarker = { 
      lat: 59.91, 
      lng: 10.75, 
      focus: true, 
      draggable: false 
     }; 

Answer 1

Das Objekt muss auf App-Ebene initialisiert werden (dh app.js) bei $ rootScope:

function runBlock($rootScope) { 
    angular.extend($rootScope, { 
    center: {}, 
    markers: {}, 
    }); 
} 

dann die erforderlichen Werte können in der Steuerung festgelegt werden:

var centerLat = parseFloat($stateParams.lat); 
var centerLng = parseFloat($stateParams.lon); 

$scope.center = { 
    lat: centerLat, 
    lng: centerLng, 
    zoom: 15 
};  

$scope.markers = { 
    marker: { 
    lat: centerLat, 
    lng: centerLng, 
    focus: true, 
    draggable: false 
    } 
};