javascript - Modify $scope from within a service AngularJs - Stack Overflow

admin管理员组

文章数量:1287484

I'm developing an application for geolocalization based on Gmaps Api. The thing is that for adding new markers by user events I've made a service that simple add a listener to the map events and add markers when its clicked. The issue is that I can't find a way to modify some $scope properties from within the service. Here is the service that i've wrote:

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

                }
            );
        }
    }
});

How can I return de e.latLng value and with that value set some $scope.property ?

I'm developing an application for geolocalization based on Gmaps Api. The thing is that for adding new markers by user events I've made a service that simple add a listener to the map events and add markers when its clicked. The issue is that I can't find a way to modify some $scope properties from within the service. Here is the service that i've wrote:

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

                }
            );
        }
    }
});

How can I return de e.latLng value and with that value set some $scope.property ?

• javascript
• google-maps
• angularjs

Share Improve this question Follow asked Sep 25, 2013 at 18:29 Facu FerrariFacu Ferrari 14311 gold badge22 silver badges1717 bronze badges 4

• 3 you should avoid updating scope variable in service instead update in controller – Ajay Singh Beniwal Commented Sep 25, 2013 at 18:43
• and how could i pass the e.latKng value to the controller? – Facu Ferrari Commented Sep 25, 2013 at 19:10
• How are you calling addListener in your controller? Cant you just return e.LatLng? – D.Evangelista Commented Sep 25, 2013 at 19:12
• I'dd injected the service into the controller and I just call the method addListener: myService.addListener() – Facu Ferrari Commented Sep 25, 2013 at 19:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

As @Ajaybeniwal said, you shouldn't touch the scope outside a controller. You could change addListener so it accepts a callback:

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

Now you can use it like this inside your controller:

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

You could also use a promise instead of a callback:

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

And then your controller would look like this:

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

Promises have an advantage over callbacks: you can bind them directly to a view and Angular will render the correct value as soon as it bees available. Check out this post for more information on that matter.

Last but not least, please notice that you need to call $rootScope.$apply() in both cases so Angular triggers a digest cycle and everything gets processed correctly. That's required because Angular knows nothing about google.maps.event.addListener and it won't get notified when the gmaps callback is executed.

本文标签： javascriptModify scope from within a service AngularJsStack Overflow