Problems with angular trouble sheets in showing and hiding? Want to get rid of $ timeout

Question

I have a flyer created with a call to L.map ('mapelement'). The problem is that if I press the button that "hides" the booklet map, then press the button again to display, the leaf map does not appear. However, when I insert setTimeout into the link function before creating the map and set it to 2 seconds, the map is displayed every time (although I have to wait 2 seconds). Is there a better alternative to using $ timeout in my custom booklet map directive to show and hide?

Answer 1

Did CSS help you?

Create one map in a visible div

visibility: visible 

Create a second map in a hidden div

 visibility: hidden 

Put both divs in the same position

 position: absolute 

If you only want to switch the visibility of your divs

Example: http://plnkr.co/edit/voTjyMLKTxUC183nf8ML?p=preview (Sorry, but not angular)

Answer 2

I created a naive example of a map-sheet directive without seeing any of your code, and I switched the map display through ng-show. It works without any $ timeout. It is difficult to diagnose where your problems arise without seeing any code or not knowing how you are trying to switch the map display.

 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>