Google Haritayı Gizle ve Haritayı Göster

Question

Angularjs kullanıyorum ve google maps'ten bir harita sunan yönergeyi göstermek ve kaldırmak için ng-if kullanıyorum ancak yönergeyi her kaldırdığımda ve haritayı tekrar yüklediğimde yükler ve gri gider. Herhangi bir ideia var mı yoksa bu problemi nasıl çözebileceğimi biliyor mu?

angular.module("dronesIntershipProject").directive('missionsMap', function() { 
var opened = false; 
return { 
    restrict: 'E', 
    template: "<div></div>", 
    replace: true, 
    link: function(scope, element, attrs) { 
     console.log(attrs.ngIf); 
     var myLatLng = new google.maps.LatLng(20,20); 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: -34.397, lng: 150.644}, 
      scrollwheel: true, 
      zoom: 8 
     }); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      title: "My Marker" 
     }); 
     marker.setMap(map); 
     document.getElementById('map').removeAttribute("ng-if"); 
     console.log(element); 
    } 

} 

Answer 1

Eğer ng-show yerine ng-if kullanarak denediniz mi:

<uib-accordion close-others="oneAtATime"> 
     <uib-accordion-group ng-repeat="mission in missions" is-open="status.open"> 
      <uib-accordion-heading > 
       <div class="noOutline"> 
        <i class="fa fa-map-o fa-2x pull-left"></i> 
        {{mission.description}} 
        {{status.open}} 
       </div> 
      </uib-accordion-heading> 
      <missions-Map id='map' missionId='20' ng-if="status.open"></missions-Map> 
     </uib-accordion-group> 
    </uib-accordion> 

Bu yönerge kodudur:

Bu akordeon kodudur?

ngIf documentation durumları:

ngIf yönergesi kaldırır ya da yeniden bir {ifade} göre DOM ağacı bir bölümü. NgIf'ye atanan ifade, değerini yanlış bir değere değerlendirirse, öğe DOM'den kaldırılır, aksi halde öğenin klonu DOM'a yeniden yerleştirilir. haritayı oluştururken

, sen map elemana takmak, ancak ngIf tarafından çıkarıldıktan sonra basitçe gitti. Haritayı tekrar göstermesi için haritayı yeniden oluşturmanız gerekecekti.

documentation for ngShow devletler:

ngShow direktifi gösterileri veya tarihinde ngShow özniteliği sağlanan ifadesini dayalı verilen HTML öğesi gizler. Öğe, numaralı belgede gösterilir veya .ng-hide CSS sınıfını öğesine kaldırarak veya ekleyerek gizlenir. ng-show kullanarak

, tamamen ng-if gibi DOM kaldırmadan yerine, sadece buna bir CSS sınıfı ekleyerek elementi gizler beri, hedefe ulaşmak mümkün olacaktır.