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

Question

我正在使用 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"> 字段，但 NOT <input type="text" ng-model="pStreet.value"> 和 <input type="text" ng-model="pNumber.value"> 尽管正如我之前所说，控制台向我显示了正确的值。比这更奇怪的是，如果我转到应用程序中的另一个选项卡并将 return 转到此选项卡，所有字段都会正确填充。 我能做什么？我在这里做错了什么？

Answer 1

在将值分配给 $scope.pStreet 和 $scope.pNumber.

之后使用 $scope.$apply()

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

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

javascript

angularjs

ionic-framework

ngcordova