Question

已经在这个问题上工作了几个小时，似乎无法找到解决方法（即使我已经阅读了数十页）。我在页面上有一个引导标签系统。在第三个标签上，我有一个谷歌地图div。我知道，由于选项卡最初不可见，因此地图div不会正确渲染地图，因此在选择选项卡时必须以某种方式刷新。起初我试图刷新地图但是无法使其工作，然后我决定尝试使用NG-IF条件再次对角度渲染div但是又有些东西不起作用......

Ma标签在HTML文件中是这样的：

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a show-tab href="#informations" data-toggle="tab">Informations client</a></li>
        <li ng-if="!client.isNew"><a show-tab href="#contacts" data-toggle="tab">Contacts</a></li>
        <li ng-if="!client.isNew"><a show-tab href="#geolocalisation" data-toggle="tab">Géolocalisation</a></li>
        <li ng-if="!client.isNew"><a show-tab href="#locations" data-toggle="tab">Locations</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content tab-container">
          <div class="tab-pane fade in active" id="informations"></div>
          <div class="tab-pane fade in active" id="some_other_stuff"></div>
          <div class="tab-pane fade" id="geolocalisation">
             <ui-gmap-google-map center='map.center' zoom='map.zoom' refresh='map.refresh' ng-if="gmap_visible"></ui-gmap-google-map>
          </div>
          <div class="tab-pane fade in active" id="a final tab"></div>
     </div>

在我的页面控制器中，我将gmap_variable初始化为false，因此ui-gmap-google-map div未呈现：

myApp.controller('ClientsController', ['$scope', '$http', '$location', '$routeParams', 'modalService', 'uiGmapGoogleMapApi', function($scope, $http, $location, $routeParams, modalService, uiGmapGoogleMapApi){
     $scope.gmap_visible = false;
}

最后，我在选项卡上使用指令来阻止单击选项卡时的导航，并且我认为我可以更新其中的gmap_visible变量：

myApp.directive('showTab',
function () {
    return {
        link: function (scope, element, attrs) {
            element.click(function(e) {
                e.preventDefault();
                $(element).tab('show');

                if (attrs.href == '#geolocalisation'){
                    scope.$parent.gmap_visible = true;
                }
            });
        }
    };
});

不幸的是，这似乎没有诀窍，我的谷歌地图div没有渲染...（我试图在指令中使用scope = false，但它也没有工作）

那里有解决方法，或者更好的是可以直接在ng中使用某些东西 - 如

<ui-gmap-google-map center='map.center' zoom='map.zoom' refresh='map.refresh' ng-if="parentElement.hasClass('active')">

哪会使任何进一步的代码变得无用？

提前谢谢！

Answer 1

好的，我设法通过搜索和调整得到答案......

离开ng-if。相反，在我的ShowTab指令中，我发出了一个事件：

if (attrs.href == '#geolocalisation'){
     scope.$emit('setGmapVisible', { gmap_visible: true });
} else {
     scope.$emit('setGmapVisible', { gmap_visible: false });
}

这会发送＆＃39; setGmapVisible＆＃39;事件到根范围。在我的控制器中，我像这样拦截了这个事件：

$scope.$on('setGmapVisible', function (event, args) {    
    $scope.gmap_visible = args.gmap_visible;
    if ($scope.gmap_visible){

  if ($scope.client == '' || $scope.client === null || $scope.client === undefined){
    var Adresse = 'France';
  } else {
    var Adresse = '';
    if ($scope.client.Adresse_1 != '' && $scope.client.Adresse_1 != null && $scope.client.Adresse_1 != 'undefined'){
      Adresse += $scope.client.Adresse_1;
    }
    if ($scope.client.Adresse_2 != '' && $scope.client.Adresse_2 != null && $scope.client.Adresse_2 != 'undefined'){
      Adresse += ' ' + $scope.client.Adresse_2;
    }
    if ($scope.client.CP != '' && $scope.client.CP != null && $scope.client.CP != 'undefined'){
      Adresse += ' ' + $scope.client.CP;
    }
    if ($scope.client.Ville != '' && $scope.client.Ville != null && $scope.client.Ville != 'undefined'){
      Adresse += ' ' + $scope.client.Ville;
    }
    if ($scope.client.Pays != '' && $scope.client.Pays != null && $scope.client.Pays != 'undefined'){
      Adresse += ' ' + $scope.client.Pays;
    }
  }

  Geocode.geocode(Adresse)
    .then(function(data){
      $scope.map = data.map;
      $scope.map.control = {};
      $scope.marker = data.marker;
      // Timeout pour être sur que le div gmap est visible
      $timeout( function(){ 
        $scope.map.control.refresh({latitude: $scope.map.center.latitude, longitude: $scope.map.center.longitude});
      }, 250);
    });


}

}

我正在构建地址参数以发送到地理编码工厂，该工厂会发回谷歌地图服务将使用的地图对象。不要忘记向此地图添加控制对象，以便能够刷新地图。

最后，我添加了250毫秒的超时，因为如果没有，选项卡可能还不可见，因此地图将不会在刷新时呈现。

在Nick Mitchell's amazing tutorial for angular-google-maps

上找到了地理编码工厂和更多建议

1995年12月23日给出的答案，希望这有助于某人，因为显然大多数人都对这个问题之王感到恼火！

AngularJS在标签内显示/刷新Google地图

1 个答案: