Question

我正在开发基于Gmaps Api的地理定位应用程序。问题是，为了通过用户事件添加新标记，我已经提供了一个服务，只需向地图事件添加一个监听器，并在单击时添加标记。问题是我找不到从服务中修改某些$ scope属性的方法。这是我写的服务：

climbingApp.factory('Markers', function(){
    return {
        addListener: function() {
            google.maps.event.addListener(
                map,
                'click',
                 function( e ) {
                    var marker = new google.maps.Marker({
                        position: e.latLng,
                        map: map
                    });

                }
            );
        }
    }
});

如何返回de e.latLng值并使用该值设置一些$ scope.property？

Answer 1

正如@Ajaybeniwal所说，你不应该触摸控制器外的范围。您可以更改addListener，以便接受回调：

climbingApp.factory('Markers', function($rootScope) {
    return {
        addListener: function(callback) {
            google.maps.event.addListener(map, 'click', function(e) {
                $rootScope.$apply(function() { callback(e); });
            });
         }
    }
});

现在您可以在控制器中使用它：

Markers.addListener(function(e) {
    $scope.model.position = e.latLng;
});

你也可以使用promise而不是回调：

climbingApp.factory('Markers', function($rootScope, $q) {
    return {
        addListener: function() {
            var deferred = $q.defer();
            google.maps.event.addListener(map, 'click', function(e) {
                $rootScope.$apply(function() { deferred.resolve(e); });
            });
            return deferred.promise;
         }
    }
});

然后你的控制器看起来像这样：

Markers.addListener().then(function(e) {
    $scope.model.position = e.latLng;
});

Promise优于回调：您可以将它们直接绑定到视图，Angular将在可用时立即呈现正确的值。查看this post了解有关此事的更多信息。

最后但并非最不重要的是，请注意，在这两种情况下都需要调用$rootScope.$apply()，因此Angular会触发摘要周期，所有内容都会得到正确处理。这是必需的，因为Angular对google.maps.event.addListener一无所知，并且在执行gmaps回调时不会收到通知。

从服务AngularJs中修改$ scope

1 个答案: