javascript - AngularJS - 没有获得 Controller 或 View 的返回值

Question

我正在做一个地理定位和反向地理编码应用程序。函数绑定(bind)到单击按钮以将 Controller 中的函数调用到我的服务。该服务可以正常工作，它正在获取值，但我无法让它将值返回到我的 Controller 。

我之前在 promise 和返回方面遇到了更多问题，我解决了其中一些问题，但显然不是全部。感谢帮助。

我的服务“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;
        }
    ]);
})();

这是我的 Controller :

(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 中创建的 promise 永远不会被解析，因此该值永远不会被存储。以下应该可以解决问题(用此代码替换 getLocation 中的 if ):

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