google 地图侦听器中的模型未更新 - angularjs

Question

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

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

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

所以我的问题是为什么作用域没有为 $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 在多个异步情况下使用 apply：

事件（ng-click 等）
Ajax 调用
超时

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

Extend with a great article

google 地图侦听器中的模型未更新 - angularjs

Model not updated in google maps listener - angularjs

javascript

google-maps

angularjs