如何在使用 Angular 调用 'navigator.geolocation.getCurrentPosition(success, error);' 后更新视图

Question

我有一个带有数组 $scope.positions=[] 的 Angular 控制器。

此数组显示在 html 和

中

<tr ng-repeat="position in positions">
          <td>{{position.latitude}}</td>
          <td>{{position.longitude}}</td>
        </tr>

当我点击一个按钮时我调用 'navigator.geolocation.getCurrentPosition(success, error);。

成功函数为：

function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;
    $scope.positions.push(new Position(latitude,longitude));
}

其中 Position 是一个对象：

function Position(latitud,longitud){
    this.latitud=latitud;
    this.longitud=longitud;
    this.toGoogle=function(){
      return new google.maps.LatLng(latitud,longitud);
    }

}

当我在按钮上方单击时，变量 $scope.positions 添加了新位置，但视图未使用新数据进行更新。如果我再次单击，table 显示以前的数据而不是当前数据。

我想 Angular 中的绑定将在事件之后执行，但是如果你有一个回调，例如，一个 Ajax 调用你应该用 JS 绘制数据。

Answer 1

您需要手动触发摘要循环。

改为：

function success(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  $scope.$apply(function() {
    $scope.positions.push(new Position(latitude, longitude));
  });
}

来自documentation：

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.

如何在使用 Angular 调用 'navigator.geolocation.getCurrentPosition(success, error);' 后更新视图

How to update view after call 'navigator.geolocation.getCurrentPosition(success, error);' with Angular

javascript

callback

angularjs