javascript - 从服务 AngularJs 中修改 $scope

Question

我正在开发一个基于 Gmaps Api 的地理定位应用程序。问题是，为了通过用户事件添加新标记，我制作了一项服务，可以简单地将监听器添加到 map 事件并在单击时添加标记。问题是我找不到从服务中修改某些 $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 所说，您不应该在 Controller 之外触摸示波器。您可以更改 addListener 以使其接受回调:

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

现在你可以在你的 Controller 中像这样使用它了:

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

然后你的 Controller 看起来像这样:

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

Promises 比回调有一个优势:您可以将它们直接绑定(bind)到 View ，Angular 会在正确的值可用时立即呈现。查看this post有关该问题的更多信息。

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