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

Question

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

这是我的 Controller 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" > 尽管正如我之前所说，控制台向我显示了正确的值。比这更奇怪的是，如果我转到应用程序中的另一个选项卡并返回到此选项卡，所有字段都会正确填充。 我能做什么？我在这里做错了什么？

Answer 1

将值分配给 $scope.pStreet 和 $scope.pNumber 后使用 $scope.$apply()。