दिखा रहा है कि छिपाने और छिपाने में कोणीय दुःख? $ Timeout

Question

से छुटकारा पाना चाहते हैं मेरे पास एल.मैप ('मैपलेमेंट') के साथ एक पुस्तिका बनाई जा रही है। मुद्दा यह है कि यदि मैं एक बटन पर क्लिक करता हूं जो पर्चे के मानचित्र को "छुपाता है", तो दिखाने के लिए बटन को फिर से क्लिक करें, पुस्तिका पुस्तिका दिखाई नहीं दे रही है। हालांकि, जब मैप बनने से पहले लिंक फ़ंक्शन के भीतर सेटटाइमआउट डालता हूं और इसे 2 सेकंड तक सेट करता है, तो नक्शा हर बार दिखाता है (हालांकि मुझे 2 सेकंड का इंतजार करना पड़ता है)। क्या मेरे कस्टम "लीफलेट-मैप" निर्देश में दिखाने और छिपाने के लिए $ टाइमआउट का उपयोग करने का बेहतर विकल्प है?

Answer 1

क्या सीएसएस आपकी मदद करेगा?

एक दृश्य div में एक नक्शा बनाएं

visibility: visible 

एक ही स्थिति में

visibility: hidden 

स्थिति दोनों अपने div एक छिपा div में दूसरा नक्शा बनाएं

position: absolute 

जब आप टॉगल करना चाहते हैं बस अपने divs की दृश्यता

उदाहरण: http://plnkr.co/edit/voTjyMLKTxUC183nf8ML?p=preview (क्षमा करें यह कोणीय नहीं है)

Answer 2

मैं अपने कोड के किसी भी देखने और एनजी शो के माध्यम से नक्शे के प्रदर्शन टॉगल कर रहा हूँ बिना एक पत्रक-नक्शा निर्देश के एक अनुभवहीन उदाहरण बनाया। यह बिना किसी $ टाइमआउट के काम करता है। यह पता लगाना मुश्किल है कि आपकी समस्याएं किसी भी कोड को देखे बिना या मानचित्र के प्रदर्शन को टॉगल करने का प्रयास करने के तरीके से कहां से उभर रही हैं।

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>