Ulotka wystawia kątowe nieszczęścia na pokazywanie i ukrywanie się? Chcesz się pozbyć $ timeout

Question

Mam tworzoną ulotkę z wywołanym L.map ("mapelement"). Problem polega na tym, że po kliknięciu przycisku, który "ukrywa" mapę ulotek, kliknij ponownie przycisk, aby pokazać, że mapa ulotek się nie wyświetla. Jednak, gdy ustawię funkcję setTimeout w funkcji łącza przed utworzeniem mapy i ustawię ją na 2 sekundy, wtedy mapa będzie wyświetlana za każdym razem (chociaż muszę poczekać 2 sekundy). Czy istnieje lepsza alternatywa dla używania $ timeout w mojej niestandardowej dyrektywie "mapka-ulotka" do pokazywania i ukrywania?

Answer 1

Czy CSS ci pomoże?

Tworzenie jedną mapę w widocznym div

visibility: visible 

Tworzenie drugą mapę w ukrytym div

visibility: hidden 

pozycję zarówno swoją div w tej samej pozycji

position: absolute 

kiedy chcesz przełączyć tylko zmienić widoczność swoich divy

Przykład: http://plnkr.co/edit/voTjyMLKTxUC183nf8ML?p=preview (Niestety to nie jest kanciasty)

Answer 2

stworzyłem naiwny przykład dyrektywy ulotka-map nie widząc dowolnego kodu i jestem przełączenie wyświetlania mapy poprzez NG-show. Działa bez żadnego limitu czasu $. Trudno jest zdiagnozować, skąd pochodzą twoje problemy, nie widząc żadnego kodu ani nie wiesz, jak próbujesz przełączać wyświetlanie mapy.

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>