谷歌地图监听器中未更新模型 - angularjs

Question

我有一个函数$scope.addReport()，它应该执行以下操作：

• 在单击时添加事件侦听器以添加新标记（通过执行 placeMarker(location)）
• 使用新坐标更新 $scope.TempMarker 模型
• 显示具有ng-show="showForm' 指令的表单
• 移除监听器，因此只能放置一个标记

我遇到的问题是，如果我尝试在侦听器内更改 $scope.showForm，它不会更新范围，它仅在侦听器内评估为 true。如果我将其移出侦听器，则范围会更新并显示表单。

所以我的问题是为什么$scope.showForm 的范围没有更新，但$scope.TempMarker 的范围却在更新，我如何在侦听器中更新它？

代码如下：

//attached to ng-show directive 
$scope.showForm = false;

//this function creates a marker based on passed location
function placeMarker(location) {
      $scope.tempMarker = new google.maps.Marker({
          position: location, 
          map: $scope.map,
          draggable: true
      });
  }

//this is executed on addReport() click
$scope.addReport = function() {
  //$scope.showForm = !$scope.showForm; ---> if declaration is here, scope is updated and the form is shown
  var newMarkerListener = google.maps.event.addListener($scope.map, 'click', function(event) {
      placeMarker(event.latLng); // create the actual marker

      //update the new report object
      $scope.newReport.lat = event.latLng.lat();
      $scope.newReport.lng = event.latLng.lng();
      $scope.showForm = !$scope.showForm; // -----> not updating the scope
      console.log($scope.showForm) // logs true
      google.maps.event.addListener($scope.tempMarker,'dragend',function(event) {
          $scope.newReport.lat = event.latLng.lat();
          $scope.newReport.lng = event.latLng.lng();
      });

     google.maps.event.removeListener(newMarkerListener);
    });
}

Answer 1

尝试用 $apply 包装它

$scope.$apply(function () { 
   $scope.showForm = !$scope.showForm; 
});

扩展名：

Angular 使用适用于几种异步情况：

1. 事件（ng-click 等）
2. Ajax 调用
3. 超时

当使用非平凡的异步操作时，绑定不会在赋值后自动发生，所以最好使用 $apply。

Extend with a great article