Как заставить контроллер angularJS всегда быть активным?

angularjs cordova

51 просмотра

1 ответ

Я занимаюсь разработкой приложения angularJS, в котором мои географические координаты с устройства берутся и отправляют в службу REST каждые несколько секунд. Код для отправки географических координат находится всего в одном контроллере. Это означает, что геолокация обновляется только на моем сервере, если открыта страница шаблона для этого контроллера. Как сделать так, чтобы геолокация всегда обновлялась независимо от того, на какой странице я нахожусь.

Вот мой код для этого контроллера:

.controller('geolocationCtrl', [ '$scope', '$http', 'geolocationFactory',
        function($scope, $http, geolocationFactory) {

            // constants should be uppercase
            var GET_PATH = 'https://temp-domain.co.uk/rest/rest.php/client/geolocation',
                PUT_PATH = 'https://temp-domain.co.uk/rest/rest.php/client/geolocation/update';


            $http.get(GET_PATH).then(function (response) {
                var respLong = Number(response.data.longitude),
                    respLat = Number(response.data.latitude);

                $scope.map = drawMap(respLong, respLat);
                $scope.marker = new google.maps.Marker({
                    position: new google.maps.LatLng(respLong, respLat)
                });
                $scope.marker.setMap($scope.map);

            }, function (errorResponse) {
                console.error('error response ' + errorResponse);
            });

            function drawMap(latitude, longitude) {
                var lat = latitude,
                    long = longitude,
                    currentLatlng = new google.maps.LatLng(lat, long);
                var map = new google.maps.Map(document.getElementById('map'), {
                    center: currentLatlng,
                    zoom: 10
                });
                return map;
            };

            setInterval(function () {
                geolocationFactory.getCurrentPosition().then(function(location) {

                    var newLatitude = location.coords.latitude,
                        newLongitude = location.coords.longitude;

                    // delete old marker
                    $scope.marker.setMap(null);
                    $scope.marker = new google.maps.Marker({
                        position: {
                            lat: newLatitude,
                            lng: newLongitude
                        }
                    });
                    var LatLng = new google.maps.LatLng(newLatitude, newLongitude);
                    $scope.map.setCenter(LatLng);
                    $scope.marker.setMap($scope.map);


                    // send data to server
                    $http.put(PUT_PATH, {
                        "longitude": newLatitude,
                        "latitude": newLongitude
                    }).then(function (response) {
                        console.log('data sended');
                    }, function (errorResponse) {
                        console.error(errorResponse);
                    });
                }.bind(this));

            }, 2000);

        }])

Это мой сервис.js

angular.module('app.services', [])

.factory('BlankFactory', [function(){

}])

.service('BlankService', [function(){

}])
.factory('geolocationFactory', ['$window', '$rootScope', '$q', function ($window, $rootScope, $q) {

    function supported() {
        return 'geolocation' in $window.navigator;
    }

    var retVal = {
        getCurrentPosition: function (options) {
            var deferred = $q.defer();
            if (supported()) {
                $window.navigator.geolocation.getCurrentPosition(
                    function (position) {
                        $rootScope.$apply(function () {
                            this.coords = position.coords;
                            this.timestamp = position.timestamp;
                            deferred.resolve(position);
                        });
                    },
                    function (error) {
                        $rootScope.$apply(function () {
                            deferred.reject({error: error});
                        });
                    }, options);
            } else {
                deferred.reject({
                    error: {
                        code: 2,
                        message: 'This web browser does not support HTML5 Geolocation'
                    }
                });
            }
            return deferred.promise;
        },

        drawMarker: function (lat, lng) {

            map = new google.maps.Map(document.getElementById("map"), mapOptions);

            var marker = new google.maps.Marker({
                position: myLatlng,
                title: "Hello World!"
            });
        }
    };
    return retVal;
}]);
Автор: sshussain270 Источник Размещён: 08.11.2019 11:28

Ответы (1)


0 плюса

Переместите интервальный запрос в сервис. Когда есть изменение, запустите событие, которое контроллер ожидает, чтобы обновить свою область.

Модифицированный сервис:

angular.module('app.services', [])

.factory('BlankFactory', [function(){

}])

.service('BlankService', [function(){

}])
.factory('geolocationFactory', ['$window', '$rootScope', '$q', '$interval', '$http', function ($window, $rootScope, $q, $interval, $http) {

    function supported() {
        return 'geolocation' in $window.navigator;
    }

    var retVal = {
        getCurrentPosition: function (options) {
            var deferred = $q.defer();
            if (supported()) {
                $window.navigator.geolocation.getCurrentPosition(
                    function (position) {
                        $rootScope.$apply(function () {
                            this.coords = position.coords;
                            this.timestamp = position.timestamp;
                            deferred.resolve(position);
                        });
                    },
                    function (error) {
                        $rootScope.$apply(function () {
                            deferred.reject({error: error});
                        });
                    }, options);
            } else {
                deferred.reject({
                    error: {
                        code: 2,
                        message: 'This web browser does not support HTML5 Geolocation'
                    }
                });
            }
            return deferred.promise;
        },

        drawMarker: function (lat, lng) {

            map = new google.maps.Map(document.getElementById("map"), mapOptions);

            var marker = new google.maps.Marker({
                position: myLatlng,
                title: "Hello World!"
            });
        }
    };


    // the factory service runs at startup, so the interval will run the whole time the app is running
    $interval(function () {
        retVal.getCurrentPosition().then(function(location) {

            var newLatitude = location.coords.latitude,
                newLongitude = location.coords.longitude;

            // broadcast event
            $rootScope.$broadcast('geolocationCurrentPosition', newLatitude, newLongitude);

            // send data to server
            $http.put(PUT_PATH, {
                "longitude": newLatitude,
                "latitude": newLongitude
            }).then(function (response) {
                console.log('data sended');
            }, function (errorResponse) {
                console.error(errorResponse);
            });
        }.bind(this));

    }, 2000);

    return retVal;
}]);

Модифицированный контроллер:

.controller('geolocationCtrl', [ '$scope', '$http',
    function($scope, $http) {

        // constants should be uppercase
        var GET_PATH = 'https://temp-domain.co.uk/rest/rest.php/client/geolocation',
            PUT_PATH = 'https://temp-domain.co.uk/rest/rest.php/client/geolocation/update';


        $http.get(GET_PATH).then(function (response) {
            var respLong = Number(response.data.longitude),
                respLat = Number(response.data.latitude);

            $scope.map = drawMap(respLong, respLat);
            $scope.marker = new google.maps.Marker({
                position: new google.maps.LatLng(respLong, respLat)
            });
            $scope.marker.setMap($scope.map);

        }, function (errorResponse) {
            console.error('error response ' + errorResponse);
        });

        function drawMap(latitude, longitude) {
            var lat = latitude,
                long = longitude,
                currentLatlng = new google.maps.LatLng(lat, long);
            var map = new google.maps.Map(document.getElementById('map'), {
                center: currentLatlng,
                zoom: 10
            });
            return map;
        };

        // listen for the event from geolocationFactory
        $scope.$on('geolocationCurrentPosition', function(event, latitude, longitude){
            // delete old marker
            $scope.marker.setMap(null);
            $scope.marker = new google.maps.Marker({
                position: {
                    lat: latitude,
                    lng: longitude
                }
            });
            var LatLng = new google.maps.LatLng(latitude, longitude);
            $scope.map.setCenter(LatLng);
            $scope.marker.setMap($scope.map);
        });
    }])
Автор: plong0 Размещён: 20.08.2016 03:34
Вопросы из категории :
32x32