AngularJS

Question

我正在做一个地理定位和反向地理编码应用程序。函数绑定到单击按钮以将我的控制器中的函数调用到我的服务。该服务有点工作，它正在获取值，但我无法将其获取到 return 我的控制器的值。

我之前有一些关于 promises 和 returns 的问题，其中一些我解决了，但显然不是全部。感谢帮助。

我的服务'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>

我在这里做错了什么，我该如何解决？

Answer 1

正如我在评论中提到的，在 getLocation 中创建的承诺从未得到解决，因此该值从未被存储。以下应该可以解决问题（用此代码替换 getLocation 中的 if）：

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

AngularJS - 没有将 return 值传递给控制器或视图

AngularJS - not getting return value to controller or view

javascript

geocoding

deferred

angular-promise