AngularJS - 컨트롤러 또는 뷰에 반환 값이 표시되지 않습니다.

Question

저는 지리적 위치 지정 및 역 지오 코딩 응용 프로그램을 수행하고 있습니다. 기능은 내 컨트롤러의 기능을 내 서비스에 호출하기 위해 버튼 클릭에 바인딩됩니다. 이 서비스는 다소 효과가 있지만 가치를 얻지 만 컨트롤러에 값을 반환 할 수는 없습니다.

이전에는 약속과 반품에 대해 더 많은 문제가 있었지만 일부는 해결했지만 분명히 전부는 아닙니다. 도움을 주시면 감사하겠습니다.

내 서비스 '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 (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function (position) { 
     showPosition(position).then(function(formattedAddress) { 
      deferred.resolve(formattedAddress); 
     } 
    }, error); 
} else { 
[...]