angularjs - 如何刷新 Angular 用户界面 map (谷歌地图)

Question

我最初使用 ng-hide 隐藏 map 。当 ng-hide-expression 计算结果为 true 时， map 不会正确显示。它仅部分显示，并且拖动时的行为也很奇怪。当我删除 ng-show 属性时， map 会正确显示。

HTML:

<div ng-controller="MapCtrl">
   <button ng-click="showMap()">Show map</button>
   <div ng-show="showMapVar">
      <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
       ui-event="{}">
      </div>
      <div id="map_canvas" ui-map="myMap" style="height:200px;width:300px" 
       ui-event="{}" ui-options="mapOptions">
      </div>
   </div>
</div>

Javascript:

angular.module('doc.ui-map', ['ui.map'])
        .controller('MapCtrl', ['$scope', function ($scope) {

$scope.myMarkers = [];

$scope.mapOptions = {
        center: new google.maps.LatLng(35.784, -78.670),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
}
$scope.showMap = function(){
        $scope.showMapVar = true;
}

}]) ;

Answer 1

当对象不应该可见时，使用ng-show仅将display属性设置为none。这会扰乱高度/宽度的计算。

另一方面，ng-if (Angular 1.2) 会删除并重新创建 DOM，强制重新计算高度/宽度.这应该可以解决问题。