directivas - El servicio/controlador AngularJS no actualiza el mapa angular-folleto-directiva

directivas angular 6

Question

Intento generar un mapa utilizando la Directiva de prospectos angulares y datos de 2 servicios angulares diferentes que llaman a servicios web utilizando $ recurso. Estos servicios devuelven mensajes JSON que incluyen valores lat / long para rellenar marcadores en un mapa.

Sin embargo, no puedo obtener la directiva para usar los datos de los servicios.

Veo que mis servicios están actualizando el alcance para que funcionen correctamente, y los marcadores del mapa se procesan correctamente si codigo los valores en el controlador (por ejemplo, vea "centro" a continuación). Lo que quiero hacer es muy similar a este ejemplo

Aquí está mi código:

Controlador:

angular.module(''myDetails'', [''leaflet-directive'', ''shop'', ''home''])
.controller(''MyDetailsCtrl'', [''$scope'', ''$routeParams'', ''$http'', ''$q'', ''$rootScope'', ''shopService'', ''homeService'', function ($scope, $routeParams, $http, $q, $rootScope, shopService, homeService) {

        function getShop() {
        var d = $q.defer();
        var shop = shopService.get({shopId: $routeParams.shopId}, function (shop) {
            d.resolve(shop);
        });
        return d.promise;
    }

        function getHome() {
        var d = $q.defer();
        var home = homeService.get({homeId: $routeParams.homeId}, function (home) {
            d.resolve(home);
        });
        return d.promise;
    } 

$q.all([
            getShop(),
            getHome()
        ]).then(function (data) {
            var shop = $scope.shop = data[0];
            var home = $scope.home = data[1];

            var markers = {
                shop: {
                    lat: $scope.shop.loc.coordinates[0],
                    lng: $scope.shop.loc.coordinates[1],
                    draggable: false,
                    message: $scope.shop.name,
                    focus: true
                },
                home: {
                    lat: $scope.home.loc.coordinates[0],
                    lng: $scope.home.loc.coordinates[1],
                    draggable: false,
                    message: $scope.home.name,
                    focus: true
                }
            };
            console.log("Markers are " + angular.toJson(markers));
            $scope.markers = markers;
        });

    $scope.center = {
                lat: 53.26,
                lng: -2.45,
                zoom: 6
            };

}]);

Lo que encuentro es que mis 2 servicios regresan, el alcance se actualiza con los valores, pero esto no se transfiere a la directiva angular-leaflet.

La documentación angular de directivas sugiere que el siguiente código en una directiva vinculará los ámbitos secundarios al alcance principal para que ambos se actualicen:

    scope: {
        center: ''=center'',
        maxBounds: ''=maxbounds'',
        bounds: ''=bounds'',
        marker: ''=marker'',
        markers: ''=markers'',
        defaults: ''=defaults'',
        paths: ''=paths'',
        tiles: ''=tiles'',
        events: ''=events''
    }

pero no parece funcionar para mí. Sin embargo, el ejemplo de la ruta angular-folleto-directivo parece permitir esto (puede agregar marcadores, cambiar marcadores, etc.) y las actualizaciones del mapa en tiempo real.

¿Qué debo hacer para que los marcadores aparezcan en mi mapa una vez que los servicios hayan retornado?

Tenga en cuenta que hay una pregunta similar en Stackoverflow para esto, pero la respuesta a estas preguntas es incluir las llamadas de servicio dentro de la Directiva. No quiero hacer esto ya que el controlador ofrece más funcionalidades que solo una llamada de servicio directo, como el manejo del envío de formularios, etc. y requiere acceso a los mismos datos.

Answer 1

Tuve un problema similar. En mi caso, tengo un div vinculado a un controlador que envuelve el elemento de etiqueta de folleto:

<div ng-controller="MapCtrl">
    <leaflet id="map" class="map" maxBounds="maxBounds" defaults="defaults" center="center"></leaflet>
</div>

Como se puede imaginar, los valores para "maxBounds", "default" y "center" estaban en el $ $ scope, no en el $ scope de la directiva. Para mitigar esto, tuve que modificar el código de directivas de folleto angular para buscar la pila de alcance para estas variables:

var mapScope = $scope;
if (mapScope.defaults === null || typeof mapScope.defaults === "undefined") {
    mapScope = mapScope.$parent;
}
if (mapScope.defaults === null || typeof mapScope.defaults === "undefined") {
    throw new Error("Cannot find map defaults - have they been initialized?");
}

Reconozco que soy nuevo en Angular, por lo que puede haber una mejor manera de lograr esto, pero funcionó para mí.

Answer 2

Parece que la forma más fácil de solucionar esto es asegurarse de agregar las siguientes líneas al controlador ...

angular.extend($scope, {
    markers : {}
}

Esto configura la herencia del alcance. No estaba haciendo esto antes, por lo que el alcance de la directiva de folleto no era consciente de $ scope.markers, ya que no existía.