1

Problème de directive de la notice angulaire: les autres parties en dehors de la carte ne s'affichent pas une seconde fois. J'utilise la directive des folioles ioniques et angulaires pour développer une fonction cartographique. Sur iPhone, iOS10 ce problème se produit, alors que sur le navigateur, il fonctionne très bien.Problème de directive de la notice angulaire: les autres parties en dehors de la carte ne s'affichent pas la deuxième fois

Comme on le voit sur l'image 1, le panneau dans le coin inférieur droit ne s'affichera pas la deuxième fois que je serai dans la page jusqu'à ce que j'appuie sur la carte une ou deux fois. Mais la première fois que je suis dans la page, ça marche.

screen

Le code est ci-dessous:

<div data-tap-disabled="true" class="map-container" style="height:100%"> 

<leaflet id='mapbox' defaults="defaults" tiles="tiles" lf-center="mapCenter" event-broadcast="events" maxbounds="maxbounds" markers="markersArray" width="100%" height="100%"></leaflet> 

</div> 

<div class="button-panel"> 
    <div class="tripguide-icon-hotel" ng-click="selectSitesAround(1)" ng-class="{selected:hotelSelected, deselected:!hotelSelected}"></div> 
    <div class="tripguide-icon-poi" ng-click="selectSitesAround(2)" ng-class="{selected:poiSelected, deselected:!poiSelected}"></div> 
    <div class="tripguide-icon-dining" ng-click="selectSitesAround(3)" ng-class="{selected:diningSelected, deselected:!diningSelected}"></div> 
    <div class="tripguide-icon-list" ng-click="clickList()" ng-class="{deselected:!listSelected}"></div> 
</div> 

CSS:

.button-panel { 
    z-index: 1000; 
    opacity: 0.85; 
    width: 76px; 
    right: 80px; 
    bottom: 128px; 
    position: absolute; 
} 

Répondre

0

Je résolu ce problème en utilisant la directive de ionique au lieu d'utiliser div.

<ion-pane class="map-panel-pane"> 
<div class="button-panel"> 
    <div class="tripguide-icon-hotel" ng-click="selectSitesAround(1)" ng-class="{selected:hotelSelected, deselected:!hotelSelected}"></div> 
    <div class="tripguide-icon-poi" ng-click="selectSitesAround(2)" ng-class="{selected:poiSelected, deselected:!poiSelected}"></div> 
    <div class="tripguide-icon-dining" ng-click="selectSitesAround(3)" ng-class="{selected:diningSelected, deselected:!diningSelected}"></div> 
    <div class="tripguide-icon-list" ng-click="clickList()" ng-class="{deselected:!listSelected}"></div> 

</div> 
</ion-pane>