wake-up-neo.com

Wie kann ich HTML5-Geolokalisierung in anglejs verwenden?

Wie kann ich HTML5-Geolocation in "anglejs" verwenden? Ich kann es mit HTML5 bekommen; aber wie kann ich es an den anglejs scope im controller übergeben? Jede Probe jsfiddle wird meinen Tag retten!

28
AngryJS

du kannst etwas tun

myApp.controller('fooCtrl', function($scope){
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position){
      $scope.$apply(function(){
        $scope.position = position;
      });
    });
  }
})

sie müssen $ scope. $ anwenden, um den Digest-Zyklus auszulösen, wenn die Geolocation eintrifft, und um alle Beobachter zu aktualisieren.

34

Ich würde vorschlagen, dies in einen Service zu abstrahieren, damit Ihr Controller nicht von window.navigator abhängig ist und die unnötige Verwendung von $ scope. Folgendes verwende ich in meinem Projekt:

angular.module('app', []).factory('geolocationSvc', ['$q', '$window', function ($q, $window) {

    'use strict';

    function getCurrentPosition() {
        var deferred = $q.defer();

        if (!$window.navigator.geolocation) {
            deferred.reject('Geolocation not supported.');
        } else {
            $window.navigator.geolocation.getCurrentPosition(
                function (position) {
                    deferred.resolve(position);
                },
                function (err) {
                    deferred.reject(err);
                });
        }

        return deferred.promise;
    }

    return {
        getCurrentPosition: getCurrentPosition
    };
}]);

Dann konsumiere ich es in meinem Controller so:

function captureUserLocation() {
    geolocationSvc.getCurrentPosition().then(onUserLocationFound);
}
63
Jared

Sie können ngGeolocation verwenden. Es ist einfach und erledigt die Arbeit.

angular.module('appName', ['ngGeolocation'])
    .controller('appCtrl', function($scope, $geolocation) {
         $geolocation.getCurrentPosition().then(function(position) {
            console.log(position, 'current position');
         });
    });
1
Muhammad Reda

Aufgrund des Problems mit Firefox, dass Benutzer keine Rückmeldung erhalten, dass die Website auf Ihren Standort zugreifen muss, wenn der Benutzer auf "Nicht jetzt", X oder außerhalb der Eingabeaufforderung ( mehr hier ) klickt, ist unten ein winziges Beispiel, für das eine Fallback-Aktion ausgelöst werden kann dieser Fall. Plunker

// GeoLocationService
angular.module('myApp').factory('GeoLocationService', function($q, $window, $timeout) {
    var factoryObj = {};

    factoryObj.getPosition = function() {
        var deferred;
        var promiseTimeout = $timeout(function() {
            deferred.reject(1); // return 1 if browser waited for user input for more than timeout delay
        }, 3000);

        deferred = $q.defer();

        if(!$window.navigator.geolocation) { // check if geoLocation is not supported by browser
            $timeout.cancel(promiseTimeout);
            deferred.reject(false); // return false if geoLocation is not supported
        }
        else { // geoLocation is supported
            $window.navigator.geolocation.getCurrentPosition(function(position) {
                $timeout.cancel(promiseTimeout);
                return deferred.resolve(position);
            }, function(error) {
                $timeout.cancel(promiseTimeout);
                return deferred.reject(error.code || 1);
            });
        }

        return deferred.promise;
    };

    return factoryObj;
});

Und deine App js.

// App
var app = angular.module('myApp', []).controller('myCtrl', function($scope, $log, GeoLocationService) {
    $scope.position = {};

    GeoLocationService.getPosition().then(
        function(position) { // 
            $scope.position = position;
            $log.debug(position);
        },
        function(errorCode) {
            if(errorCode === false) {
                alert('GeoLocation is not supported by browser.');
            }
            else if(errorCode == 1) {
                alert('User either denied GeoLocation or waited for long to respond.');
            }
        }
    );
});
0
Muhammad Reda