2015-09-13 27 views
7

İyonik modelim görünmüyor. Ekran bir şekilde griye dönüşecek, ancak bir modal göstermiyor.İyonik model görüntülenmiyor

Neyin yanlış olduğunu merak ediyorum.

Bu benim kodudur: Orignial görünüm:

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

Denetleyici:

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

    }) 

pencere gri dönecek, ancak hiçbir kalıcı yoktur.

Yardımlarınız için teşekkürler! (Mac'te Safari tarayıcıda çalıştı)

cevap

6

<ion-modal-view> içine modal içine alın yerine ayrıntı için <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.

+0

iyonik sürümünde çalışma, teşekkürler. Ama sanırım bu garip bir etiket sarılmış çünkü ben böyle bir etikette sarılı kodu olan net birkaç örnek gördüm. Neyse, teşekkürler! – user2529173

+0

Komut dosyası etiketinden dolayı, aslında modal sınıfıyla div kullanmak eski bir yöntemdi (son zamanlarda size en son şekilde güncelledim bile), eski iyonik kitaplıklar ile çalışabilirler, ancak en yeni olanlarla çalışamazlar. Http://ionicframework.com/docs/api/service/$ionicModal/ dokümantasyonunu görürseniz, örnek olarak

3

küçük güncelleme: mevcut sürümünde

(mayın 1.7.7 ise) Eğer sarma <ion-modal-view > kullanmak zorunda, ancak sarma <script> Etiketleme-kullanmamalısınız! Aksi takdirde sadece karanlık bir yer paylaşacaksınız, ancak modal pencereden değil! komut etiketi olmadan

+0

Ben ve komut dosyası etiketi denedim ve hala çalışmıyor ... BTW hangi sürüm 1.7.7 iyonik? –

+0

1.7.14 kullanıyorum –

0

, Bu kod yardımcı 1.3.0