Use ngMap with tabset - only the first tab will be initiated

问题

Only first tab is set.

<tabset>
    <tab heading="One"><map center="London"></map></tab>
    <tab heading="Two"><map center="Liverpool"></map></tab>
    <tab heading="Three">Three</tab>
</tabset>

http://plnkr.co/edit/DZj5RkDUHk9C8oTvsjcf?p=preview

some advice?

------ EDIT ------

if use angular 1.3.15 and ui-bootstrap tpls-0.13.3 it works only pushing button

<button class="btn btn-primary" ng-click="reRednerMap()">reRender</button>

http://plnkr.co/edit/3P4iLTrog1ismFDUQNQe?p=preview

Some advice?

回答1:

This solutions works fine.

<tabset>
     <tab heading="One" select="reRenderMap()"><map center="London"></map></tab>
     <tab heading="Two" select="reRenderMap()"><map id="liverpool" center="Liverpool"></map></tab>
     <tab heading="Three">Three</tab>
 </tabset>

in controller

 $scope.reRenderMap = function() {
            $timeout(function(){
                angular.forEach($scope.maps, function(index) {
                    google.maps.event.trigger(index, 'resize');
                });
            }, 500);
        }

        $scope.maps = [];

        $scope.$on('mapInitialized', function(evt, evtMap) {
              $scope.maps.push(evtMap);
        });

http://plnkr.co/edit/3P4iLTrog1ismFDUQNQe?p=preview

回答2:

Actually map is initiated, but it is not correctly rendered (map rendering depends on parent container which, in its turn is hidden). So you should rerender it by triggering map resize on tab opening.

Bind reRenderFunction on selection event.

 <tabset>
     <tab heading="One"><map center="London"></map></tab>
     <tab heading="Two" select="reRednerMap()"><map id="liverpool" center="Liverpool"></map></tab>
     <tab heading="Three">Three</tab>
 </tabset>

Modify the controller:

 angular.module('ui.bootstrap.demo', ['ui.bootstrap','ngMap']);
 angular.module('ui.bootstrap.demo').controller('test', function ($scope) {
    $scope.reRednerMap = function() {            
        google.maps.event.trigger(this.map, 'resize');    
    }
 });

http://plnkr.co/edit/s3yPC1ZQE5c8jZoqCmbf?p=preview

来源：https://stackoverflow.com/questions/32371691/use-ngmap-with-tabset-only-the-first-tab-will-be-initiated

标签

angularjs

twitter-bootstrap

ng-map