调用 '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 添加了新位置，但视图不会使用新数据进行更新。如果我再次点击，表格会显示以前的数据，但不会显示当前数据。

我认为 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() 用于从外部以角度执行表达式 角度框架。 （例如来自浏览器 DOM 事件， setTimeout、XHR 或第三方库）。因为我们正在呼唤 我们需要执行适当的范围生命周期的角度框架 异常处理，执行手表。