Ionic/Angular JS - Les champs d'entrée ne se mettent pas correctement à jour après l'utilisation de la géolocalisation

Question

Je construis une nouvelle application utilisant Ionic/Angular JS. Dans un onglet d'application spécifique, j'utilise la géolocalisation pour remplir 4 champs (nom de rue, numéro de rue, lat et long).

Voici comment mon contrôleur JS ressemble à cet onglet spécifique:

.controller('PetitionsCtrl', function($scope, $cordovaGeolocation, $log) { 

     var posOptions = {timeout: 10000, enableHighAccuracy: false}; 
     $cordovaGeolocation 
     .getCurrentPosition(posOptions) 
     .then(function (position) { 
     $scope.lat = position.coords.latitude; 
     $scope.lng = position.coords.longitude; 

     $log.log($scope.lat); 
     $log.log($scope.lng); 

     $scope.pLat = {value: $scope.lat}; 
     $scope.pLng = {value: $scope.lng}; 

     var geocoder = new google.maps.Geocoder(); 
     var latlng = new google.maps.LatLng($scope.lat, $scope.lng); 
     var request = { 
      latLng: latlng 
     }; 

     geocoder.geocode(request, function(data, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
      if (data[0] != null) { 
       $log.log("Strada: " + data[0].address_components[1].long_name); 
       $log.log("Numar: " + data[0].address_components[0].long_name); 
       $log.log("Localitate: " + data[0].address_components[2].long_name); 
       $log.log("Adresa: " + data[0].formatted_address); 
       $scope.pStreet = {value: data[0].address_components[1].long_name}; 
       $scope.pNumber = {value: data[0].address_components[0].long_name}; 
      } else { 
       $log.log("Adresa indisponibila"); 
      } 
      } 
     }) 
     }); 
}) 

Et voici comment la partie HTML ressemble à:

<label class="item item-input"> 
    <span class="input-label">Strada</span> 
    <input type="text" ng-model="pStreet.value"> 
</label> 
<label class="item item-input"> 
    <span class="input-label">Număr</span> 
    <input type="text" ng-model="pNumber.value"> 
</label> 
<label class="item item-input"> 
    <span class="input-label">Lat</span> 
    <input type="text" ng-model="pLat.value"> 
</label> 
<label class="item item-input"> 
    <span class="input-label">Lng</span> 
    <input type="text" ng-model="pLng.value"> 
</label> 

Maintenant, comme vous pouvez le voir, je me sers $log pour afficher les informations dans la console. Maintenant, voici la partie étrange ... Dans la console, je reçois toutes les informations correctement affichées. En outre, les champs <input type="text" ng-model="pLat.value"> et <input type="text" ng-model="pLng.value"> sont remplis mais PAS le <input type="text" ng-model="pStreet.value"> et <input type="text" ng-model="pNumber.value"> bien que, comme je l'ai déjà dit, la console me montre les bonnes valeurs. Plus étrange que cela, si je vais dans un autre onglet de mon application et que je reviens à cet onglet, tous les champs sont remplis correctement. Que puis-je faire? Qu'est-ce que je fais mal ici?

Answer 1

Utilisez $ scope. $ Apply() après avoir affecté la valeur à $ scope.pStreet et $ scope.pNumber.