Il volantino emette problemi angolari nel mostrare e nascondere? Voglio sbarazzarci di $ timeout

Question

Ho un opuscolo che viene creato con L.map ('mapelement') chiamato. Il problema è che se faccio clic su un pulsante che "nasconde" la mappa del volantino, quindi fare nuovamente clic sul pulsante per mostrare, la mappa del volantino non viene visualizzata. Tuttavia, quando inserisco un setTimeout all'interno della funzione di collegamento prima che venga creata la mappa e lo imposti su 2 secondi, la mappa mostra ogni volta (anche se devo aspettare 2 secondi). Esiste un'alternativa migliore all'utilizzo di $ timeout nella mia direttiva personalizzata "leaflet-map" per mostrare e nascondere?

Answer 1

Il CSS ti può aiutare?

Crea una mappa in un div visibile

visibility: visible 

Creare la seconda mappa in un div nascosti

visibility: hidden 

posizionare sia il div nella stessa posizione

position: absolute 

Quando si vuoi cambiare solo cambiare la visibilità delle tue div

Esempio: http://plnkr.co/edit/voTjyMLKTxUC183nf8ML?p=preview (Ci dispiace non è angolare)

Answer 2

ho creato un esempio ingenua di una direttiva volantino-mappa senza vedere uno dei tuoi codici e sto commutando la visualizzazione della mappa tramite ng-show. Funziona senza alcun timeout $. È difficile diagnosticare da dove derivano i tuoi problemi senza vedere alcun codice o sapere come stai cercando di attivare la visualizzazione della mappa.

angular.module('demo', []) 
 

 
.directive('leafletMap', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     mapOptions: '&' 
 
    }, 
 
    template: '<div><button ng-click="toggleShow()">Toggle Map</button><div class="demo-map" ng-show="isShown"></div></div>', 
 
    link: function(scope, elem, attrs) { 
 
     // Find element to bind to map 
 
     var mapElem = elem.children().find('div')[0], 
 
     // get map options from isolate scope 
 
     mapOptions = scope.mapOptions(); 
 

 
     // State of hide/show 
 
     scope.isShown = true; 
 

 
     // Create Map. 
 
     var map = L.map(mapElem, mapOptions); 
 

 
     // Just taken from leaflet example 
 
     L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { 
 
     maxZoom: 18, 
 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
 
      '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
 
      'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
 
     id: 'mapbox.streets' 
 
     }).addTo(map); 
 

 
     // method to toggle the shown/hidden state of map 
 
     scope.toggleShow = function() { 
 
     scope.isShown = !scope.isShown; 
 
     }; 
 

 
     // cleanup on element destroy 
 
     elem.on('$destroy', function() { 
 
     map.remove(); 
 
     }); 
 
    } 
 
    }; 
 
}) 
 

 
.controller('DemoController', function() { 
 
    this.mapOptions = { 
 
    center: [51.505, -0.09], 
 
    zoom: 13 
 
    }; 
 

 

 
});

.demo-map { 
 
    height: 500px; 
 
}

<script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> 
 
<div ng-app="demo" ng-controller="DemoController as ctrl"> 
 
    <leaflet-map map-options="ctrl.mapOptions"></leaflet-map> 
 
</div>