Проблема директивы листовки Angular: другие части, кроме карты, не отображаются при повторном входе на страницу

Проблема директивы листовки Angular: другие части, кроме карты, не отображаются при повторном входе на страницу. Я использую директиву ionic и angular leaflet для разработки функции карты. На iPhone, iOS10 эта проблема возникает, а в браузере все работает нормально.

Как видно на рисунке 1, панель в правом нижнем углу не будет отображаться во второй раз, когда я попаду на страницу, пока я не коснусь карты один или два раза. Но когда я впервые захожу на страницу, все работает.

экран

Код указан ниже:

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

ionic-framework javascript angularjs leaflet angular-leaflet-directive
person xiangzuomanongerbude    schedule 12.01.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я решил эту проблему, используя директиву ionic вместо 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>
person xiangzuomanongerbude    schedule 12.01.2017