Служба/контроллер AngularJS, не обновляющая директиву с угловым листом

Question

Я пытаюсь создать карту, используя Angular-Leaflet-Directive, и данные из двух разных Угловых сервисов, которые называют веб-сервисы с использованием $ resource. Эти службы возвращают сообщения JSON, которые включают значения lat/long для заполнения маркеров на карте.

Однако я не могу получить директиву, чтобы использовать данные из служб.

Я вижу, что мои службы обновляют область действия, поэтому они работают нормально, а маркеры карт отображаются правильно, если я жестко кодирую значения в контроллере (например, см. Ниже «center»). То, что я хочу сделать, это очень похоже на эту example

Вот мой код:

Контроллер:

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

}]); 

Что я нахожу в том, что вернуть мои 2 услуги, сфера обновляется со значениями, но это не передается в директиву с угловым листочком.

Angular documentation on directives предполагает, что следующий код в директиве будет связывать дочерние рамки для родительской области, так что они оба обновлены:

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

, но это не похоже на работу для меня. Тем не менее, angular-leaflet-directive path example, похоже, разрешает это (вы можете добавлять маркеры, менять маркеры и т. Д.) И обновления карт в режиме реального времени.

Что нужно сделать, чтобы маркеры отображались на моей карте после возвращения служб?

Обратите внимание, что для этого есть вопрос о Stackoverflow, но ответ на эти вопросы заключается в включении служебных вызовов в Директиву. Я не хочу этого делать, поскольку контроллер предлагает больше функциональности, чем просто прямой вызов службы, такой как обработка формы отправки и т. Д. И требует доступа к тем же данным.

Answer 1

У меня была аналогичная проблема. В моем случае, у меня есть DIV привязан к контроллеру оберточного листовки тег элемент:

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

Как вы можете себе представить, значения для «maxBounds», «Defaults» и «центра» были в родительских $ scope, а не $ scope директивы. Чтобы смягчить это, я должен был изменить угловую-листовку директивы коды, чтобы посмотреть стек области видимости для этих переменных:

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?"); 
} 

Я признаю, что я новичок в Угловой, так что может быть лучше, чтобы выполнить это, но это сработало для меня.

Answer 2

Кажется, самый простой способ исправить это, чтобы убедиться, что вы добавить следующие строки к контроллеру ...

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

Это создает области видимости наследования. Раньше я этого не делал, поэтому в директиве листка не было известно о $ scope.markers, которого не было!