AngularJS服務/控制器未更新angular-leaflet-directive映射

Question

我正在嘗試使用Angular-Leaflet-Directive和來自使用$ resource調用Web服務的2個不同Angular服務的數據生成地圖。 這些服務返回包含經緯度值的JSON消息，以填充地圖上的標記。

但是，我無法獲得使用服務中數據的指令。

我可以看到我的服務正在更新范圍，因此它們可以正常工作，並且如果我將值硬編碼到控制器中，則地圖標記可以正確呈現（例如，請參見下面的“中心”）。 我想做的事情與此示例非常相似

這是我的代碼：

控制器：

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-leaflet指令。

有關指令的Angular文檔建議， 指令中的以下代碼會將子作用域鏈接到父作用域，以便它們都被更新：

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

但這似乎對我不起作用。 但是， 角葉指令路徑示例似乎確實允許這種情況（您可以添加標記，更改標記等），並且地圖可以實時更新。

服務返回后，我該怎么做才能使標記顯示在地圖上？

請注意，在Stackoverflow上也有類似的問題，但是這些問題的答案是在指令中包括服務調用。 我不想這樣做，因為控制器不僅提供直接的服務調用（例如處理表單提交等），而且還提供更多功能，並且需要訪問相同的數據。

Answer 1

我有一個類似的問題。 就我而言，我將div綁定到包裝傳單標簽元素的控制器上：

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

可以想象，“ maxBounds”，“ defaults”和“ center”的值位於父$ scope中，而不是指令的$ scope中。 為了減輕這種情況，我必須修改angular-leaflet-directive代碼以查找這些變量的作用域堆棧：

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

我承認我是Angular的新手，所以也許有更好的方法可以做到這一點，但是它對我有用。

Answer 2

解決此問題的最簡單方法似乎是確保將以下行添加到控制器...

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

這將設置范圍繼承。 我以前沒有這樣做，所以傳單指令中的作用域不知道$ scope.markers，因為它不存在！