Question

我正试图用角度JS点击显示谷歌地图。但我的功能似乎是根据函数调用切换可见性（通过ng-show）。这意味着我的'resize'事件的触发器在map div实际可见之前执行，因此它无法正常工作。

$scope.mapVisible = false;
$scope.toggleMap = function() {
    $scope.myMap.panTo($scope.myMarkers[0].getPosition());
    $scope.mapVisible = !$scope.mapVisible;
    // this executes too soon. How to block until the div is really visible?
    google.maps.event.trigger($scope.myMap, 'resize');
}

<div ng-show="mapVisible">
   <!-- map here -->
</div>

那么我怎样才能阻止触发地图上的'resize'事件，直到div真正可见？

Answer 1

$scope.$watch("mapVisible", function (val) {
  if (val) {
    google.maps.event.trigger($scope.myMap, "resize");
  }
});

这将确保在触发事件之前地图可见 Angularjs通过执行脏检查来处理双向绑定。它基本上意味着被观察的值与前一个周期中的值进行比较。当某些事情发生时，每个周期（$digest）都会开始运行，这可能会改变范围内的任何值。如果值发生变化，则会在循环完成后反映出来。

回到您的问题，当您切换mapVisible属性时，视图不会立即更新。它在重绘视图之前等待循环结束。但是，当地图仍然不可见时，你会很早地触发resize事件，因此渲染无效。

$watch确实会观察属性，更改将反映在更改的next周期中，这意味着视图将在调用时间的情况下更新。在此处放置resize功能可以解决您的问题。

Answer 2

我认为最简单的情况是使用$timeout服务：

scope.$on "map:ui:shown", (event, args)->
    $timeout ->
      #use a delay because most of the time, the resizing should occur immediately after an angular cycle
      #like when an ng-show has been set to the True condition
      googleMaps.event.trigger(map, 'resize')
      map.fitBounds scope.bounds if scope.bounds

AngularJS：如何在函数返回之前阻止执行？

2 个答案: