如何在調用'navigator.geolocation.getCurrentPosition（成功，錯誤）後更新視圖';'與角

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

其中的位置是一個對象：

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：

$申請（）是用來從 角框架之外在角度來執行的表達式。 （例如，來自瀏覽器DOM事件， setTimeout，XHR或第三方庫）。因爲我們正在調用 角度框架，我們需要執行適當的範圍生命週期 異常處理，執行手錶。