AngularJS - 没有获得控制器或视图的返回值

时间:2017-04-30 20:18:16

标签: javascript angularjs geocoding angular-promise deferred

我正在进行地理定位和反向地理编码应用程序。功能绑定到按钮单击以将控制器中的功能调用到我的服务。该服务有点工作,它正在获取值,但我不能让它将值返回给我的控制器。

我以前在承诺和回报方面遇到了一些问题,其中一些我解决但显然不是全部。感谢帮助。

我的服务'geoService':

(function() {
    'use strict';
    angular.module('JourneyApp').factory('geoService',
    [
        '$q',
        function($q) {
            var geoServiceFactory = {};

            function getLocation(location) {

                var deferred = $q.defer();

                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition, error);

                } else {
                    console.log("No support for Geolocation");
                    deferred.reject(false);
                }
                return deferred.promise;
            }
            function error(error) {
                console.log(error);
            }

            function showPosition(position) {

                var deferred = $q.defer();
                var geocoder = new google.maps.Geocoder();
                var coords = position.coords;
                var latlng = { lat: parseFloat(coords.latitude), lng: parseFloat(coords.longitude) };

                geocoder.geocode({ 'location': latlng },
                    function (results, status) {
                        if (status === google.maps.GeocoderStatus.OK) {
                            console.log(results);
                            if (results[0]) {
                                var formattedAddress = results[0].formatted_address;
                                console.log(formattedAddress);
                                deferred.resolve(formattedAddress);
                            } else {
                                console.log("No match, sorry");
                                deferred.reject("Error");
                            }
                        } else {
                            console.log("Error, sorry");
                            deferred.reject("Error");
                        }
                    });
                return deferred.promise;
            }

            geoServiceFactory.getLocation = getLocation;
            geoServiceFactory.showPosition = showPosition;

            return geoServiceFactory;
        }
    ]);
})();

这是我的控制者:

(function() {
    'use strict';
    angular.module('JourneyApp').controller('tripsController',
    [
        'tripsService', 'vehicleService', 'geoService', function(tripsService, vehicleService, geoService) {
            //'tripsService', function (tripsService) {

            var vm = this;

            // Get start geolocation
            vm.getStartLocation = function() {
                geoService.getLocation().then(function (location) {
                    vm.trip.startAdress = location;
                });
            }

            // Get stop geolocation
            vm.getStopLocation = function() {
                geoService.getLocation().then(function(location) {
                    vm.trip.stopAdress = location;
                });
            }
        }
    ]);
}());

我的观点的一部分:

<div class="col-md-2">
    <input ng-model="vm.trip.startAdress"/>
</div>
<div class="col-md-2">
    <button ng-click="vm.getStartLocation()">Get location</button>
</div>

我在这里做错了什么,如何解决?

1 个答案:

答案 0 :(得分:2)

正如我在评论中所提到的,getLocation中创建的承诺永远不会被解决,因此价值永远不会存储。以下应该做的伎俩(用这段代码替换getLocation中的if):

[...]
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
        showPosition(position).then(function(formattedAddress) {
            deferred.resolve(formattedAddress);
        }
    }, error);
} else {
[...]