Google Map Скрыть и показать карту

Question

Я использую angularjs, и я использую ng-if, чтобы показать и удалить директиву, которая представляет карту с карт Google, но каждый раз, когда я удаляю директиву и снова кладу ее не загружается и становится серым. Кто-нибудь есть какая-то идея или знает, как я могу решить эту проблему.

Это код аккордеон:

<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> 

Это код директивы:

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

Вы пробовали использовать ng-show вместо ng-if?

В ngIf documentation состояния:

директива ngIf удаляет или воссоздает часть DOM дерева на основе выражения {}. Если выражение, присвоенное ngIf, оценивает на ложное значение, тогда элемент удаляется из DOM, в противном случае клон DOM добавляется клон элемента .

При создании карты, вы приложите к map элементу, но как только он удаляется ngIf он просто исчез. Вам нужно будет воссоздать карту, чтобы она снова появилась.

В documentation for ngShow состоянии:

В ngShow директива показывает или скрывает данный HTML-элемент, основанный на выражение, предоставленное атрибут ngShow. Элемент отображается или скрыт, удалив или добавив CSS-класс .ng-hide в элемент .

С помощью ng-show, вы сможете достичь своей цели, так как он просто скрывает элемент, добавив класс CSS к нему, вместо того, чтобы полностью удалить его из DOM, как ng-if.