AngularJS service / controller does not update angular -lift-directive map

Question

I am trying to create a map using Angular-Leaflet-Directive and data from two different Angular services that call web services using the $ resource. These services return JSON messages that include lat / long values ​​for filling markers on the map.

However, I cannot get a directive to use data from services.

I see that my services update the scope, so they work fine, and map markers are displayed correctly if I hard-code the values ​​in the controller (for example, see below "center"). What I want to do is very similar to this example

Here is my code:

Controller:

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 }; }]); 

What I find is that my 2 services are returning, the update area is updated with values, but this is not passed to the angular -leaflet directive.

Angular's directive documentation assumes that the following code in the directive will associate child regions with the parent region so that they are both updated:

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

but it doesn't seem to work for me. However, the angular path to the elevator directive seems to resolve this (you can add markers, change markers, etc.) and update maps in real time.

What do I need to do so that the markers appear on my map after the services are returned?

Note that there is a similar question for Stackoverflow, but the answer to these questions is to enable service calls in the Directive. I do not want to do this, because the controller offers more functionality than just a direct call to a service, such as processing a form, etc. And requires access to the same data.

Answer 1

I had a similar problem. In my case, I have a div associated with a controller that wraps the leaflet tag element:

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

As you can imagine, the values ​​for "maxBounds", "defaults" and "center" were in the parent scope of $ scope, and not in the $ scope directive. To mitigate this, I had to modify the angular -leaflet directive code to find the scope stack for these 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?"); } 

I admit I'm new to Angular, so there may be a better way to accomplish this, but it worked for me.

Answer 2

It seems the easiest way to fix this is to make sure you add the following lines to the controller ...

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

This sets the inheritance of the region. I did not do this before, so the leaflet directive did not know about $ scope.markers, which was not there!