Modale Ionico non visualizzato

la mia vista modale ionica non verrà visualizzata. Lo schermo diventa in qualche modo grigio, ma non mostra una modale.Modale Ionico non visualizzato

Mi chiedo cosa c'è che non va.

Questo è il mio codice: Orignial vista:

<ion-header-bar class="bar-energized"> 
    <h1 class="title">Contact Info</h1> 
</ion-header-bar> 
<ion-content> 
    <div class="card" ng-controller='DashCtrl' ng-click="openModal()"> 
    <div class="item item-divider"> 
     {{contact.name}} 
    </div> 
    <div class="item item-text-wrap"> 
     {{contact.info}} 
    </div> 
    </div> 
</ion-content>

modale:

<script id="templates/contact-modal.html" type="text/ng-template"> 
    <div class="modal"> 
    <ion-header-bar> 
     <h1 class="title">Edit Contact</h1> 
    </ion-header-bar> 
    <ion-content> 
     <div class="list"> 
     <label class="item item-input"> 
      <span class="input-label">Name</span> 
      <input type="text" ng-model="contact.name"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Info</span> 
      <input type="text" ng-model="contact.info"> 
     </label> 
     </div> 

     <button class="button button-full button-energized" ng-click="closeModal()">Done</button> 
    </ion-content> 
    </div> 
</script>

Controller:

.controller('DashCtrl', function($scope, $ionicModal) { 

    $scope.contact = { 
     name: 'Mittens Cat', 
     info: 'Tap anywhere on the card to open the modal' 
    } 

    $ionicModal.fromTemplateUrl('templates/contact-modal.html', { 
     scope: $scope, 
     animation: 'slide-in-up' 
    }).then(function(modal) { 
     $scope.modal = modal 
    }) 

    $scope.openModal = function() { 
     $scope.modal.show() 
    } 

    $scope.closeModal = function() { 
     $scope.modal.hide(); 
    }; 

    $scope.$on('$destroy', function() { 
     $scope.modal.remove(); 
    }); 

    })

La finestra diventerà grigia, ma non c'è modale.

Grazie per l'aiuto!

(provato nel browser Safari su Mac)

fonte

2015-09-13 user2529173

includere la parte modale in <ion-modal-view> invece di <div class="modal">

<ion-modal-view > 
    <ion-header-bar> 
     <h1 class="title">Edit Contact</h1> 
    </ion-header-bar> 
    <ion-content> 
      <div class="list"> 
      <label class="item item-input"> 
       <span class="input-label">Name</span> 
       <input type="text" ng-model="contact.name"> 
      </label> 
      <label class="item item-input"> 
       <span class="input-label">Info</span> 
       <input type="text" ng-model="contact.info"> 
      </label> 
      </div> 

      <button class="button button-full button-energized" ng-click="closeModal()">Done</button> 
    </ion-content> 
</ion-modal-view>

Documentation per i dettagli.

fonte

2015-09-13 18:46:10

Quel codice ha contribuito, grazie. Ma penso che sia perché è stato avvolto in un tag , il che è strano, perché ho visto qualche esempio sulla rete con il codice avvolto in tale tag. Comunque grazie! – user2529173

Non a causa del tag script, in realtà l'uso di div con classe modal era un vecchio modo di farlo (anche io di recente aggiornato all'ultima versione, che ti ho detto), potevano lavorare con vecchie librerie ioniche, ma non con quelle più recenti. Se vedi la documentazione http://ionicframework.com/docs/api/service/$ionicModal/, usano il tag

un piccolo aggiornamento:

Nella versione attuale (il mio è 1.7.7) è necessario utilizzare il confezionamento <ion-modal-view >, ma non deve utilizzare il confezionamento <script> -tag! Altrimenti si otterrà solo una sovraimpressione scura ma non la finestra modale!

fonte

2015-10-22 23:08:50 Sebiworld

Ho provato con e senza tag script e non funziona ancora ... BTW quale versione è ionica 1.7.7? –

Sto usando 1.7.14 –

senza tag script, il suo funzionamento nella versione ionico 1.3.0

fonte

2016-06-10 01:28:12 Mahen

Problemi correlati

Modale Ionico non visualizzato

risposta

Problemi correlati