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

Question

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

在 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-if 中使用某些东西，例如

<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 });
}

这会将“setGmapVisible”事件发送到根范围。在我的控制器中，我像这样拦截这个事件：

$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 日给出的答案，希望这对某人有所帮助，因为显然大多数人都对这个问题之王感到恼火！