AngularJS服务/控制器不更新angular-leaflet-directive映射

2019年8月4日 170次阅读

我正在尝试使用
Angular-Leaflet-Directive和使用$resource调用Web服务的2个不同Angular服务的数据生成映射.这些服务返回包含lat / long值的JSON消息,以填充地图上的标记.

但是,我无法获得使用服务数据的指令.

我可以看到我的服务正在更新范围,以便它们正常工作,如果我将值硬编码到控制器中,地图标记会正确呈现(例如,请参见下面的“中心”).我想做的与这个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-leaflet-directive.

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上存在类似的问题,但这些问题的答案是在指令中包含服务调用.我不想这样做,因为控制器提供的功能不仅仅是直接的服务调用,例如处理表单提交等,并且需要访问相同的数据.

最佳答案 我有一个类似的问题.在我的情况下,我有一个div绑定到包装leaflet标签元素的控制器：

<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的新手,所以可能有更好的方法来实现这一点,但它对我有用.

点赞