Ionic / Angular JS -使用地理定位后输入字段不能正确更新

Ionic / Angular JS - Input fields not updating correctly after using Geolocation

本文关键字:字段 输入 不能 更新 定位 JS Angular Ionic      更新时间:2023-09-26

我正在使用Ionic/Angular JS构建一个新的应用程序。在一个特定的应用程序选项卡中,我使用地理位置填充4个字段(街道名称,街道号码,纬度和长度)

这是我的控制器JS对于这个特定选项卡的样子:

.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");
            }
          }
        })
      });
})

HTML部分是这样的:

<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>

现在您可以看到,我使用$log在控制台中显示信息。现在奇怪的部分来了……在控制台中,我得到了正确显示的所有信息。此外,<input type="text" ng-model="pLat.value"><input type="text" ng-model="pLng.value">字段被填充,但是不是 <input type="text" ng-model="pStreet.value"><input type="text" ng-model="pNumber.value">,尽管正如我之前所说的,控制台向我显示了正确的值。更奇怪的是,如果我转到应用中的另一个选项卡,然后返回到这个选项卡,所有字段都被正确填充。我该怎么办?我哪里做错了?

在给$scope赋值后使用$scope.$apply()。pStreet和$scope.pNumber.