Ionisches Modal nicht angezeigt

meine ionische modale Ansicht wird nicht angezeigt. Der Bildschirm wird irgendwie grau, zeigt aber kein Modal.Ionisches Modal nicht angezeigt

Ich frage mich, was los ist.

Dies ist mein Code: Orignial Ansicht:

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

Modal:

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

    })

Das Fenster wird grau drehen, aber es gibt keine modal.

Vielen Dank für Ihre Hilfe!

(Versuchte in Safari-Browser auf dem Mac)

Quelle

2015-09-13 user2529173

Schliessen Sie Ihren modal in <ion-modal-view> statt <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 zum Detail.

Quelle

2015-09-13 18:46:10

Dieser Code geholfen, danke. Aber ich denke, es liegt daran, dass es in einem -Tag verpackt wurde, was merkwürdig ist, weil ich ein paar Beispiele im Netz gesehen habe, die den Code in ein solches Tag eingepackt haben. Trotzdem danke! – user2529173

Nicht wegen der Skript-Tag, tatsächlich mit div mit Modal-Klasse war alte Art und Weise es zu tun (auch ich vor kurzem auf den neuesten Weg aktualisiert, die ich Ihnen sagte), könnten sie mit alten ionischen Bibliotheken arbeiten, aber nicht mit den neuesten. Wenn Sie die Dokumentation http://ionicframework.com/docs/api/service/$ionicModal/ sehen, wird in diesem Beispiel das Tag

Ein kleines Update:

In der aktuellen Version (Mine ist 1.7.7) haben Sie die Verpackung <ion-modal-view > zu verwenden, dürfen aber nicht die Verpackung <script> -tag verwenden! Ansonsten erhalten Sie nur ein dunkles Overlay, aber nicht das Modal-Fenster!

Quelle

2015-10-22 23:08:50 Sebiworld

Ich habe versucht mit und ohne Skript-Tag und es funktioniert immer noch nicht ... BTW welche Version ist 1.7.7 ionischen? –

Ich benutze 1.7.14 –

ohne Skript-Tag, dessen Arbeits in ionischer Version 1.3.0

Quelle

2016-06-10 01:28:12 Mahen

Verwandte Themen

Ionisches Modal nicht angezeigt

Antwort

Verwandte Themen