2014-10-04 2 views
6

Sto provando a utilizzare $ ionicPopup per gestire login/registrazione sulla mia app. Lo sto aprendo da un servizio, quindi ho creato un nuovo scope e l'ho collegato a ionicPopup. Sembra dovrebbe occupare in questo modo:

$ionicPopup.show 
    template: ''' 
    <form name="loginForm" novalidate> 
     ... 
    </form> 
    ''', 
    scope: $scope, 
    buttons: [ 
    { 
     text: 'Cancel', 
    }, 
    { 
     text: '<b>Save</b>', 
     type: 'button-positive', 
     onTap: (e) -> 

     form = $scope.loginForm #why is it undefined? 
    } 
    ] 

Così ho chiamato il modulo come LoginForm, e voglio accedere all'interno della funzione onTap per gestire la convalida. Ma loginForm non esiste su $ scope, come se fosse in una normale forma di convalida all'interno di un controller. Quindi hai qualche idea su come dovrei gestire la validazione qui?

Grazie!

+0

È possibile utilizzare la convalida html5 nel modulo –

+0

Sfortunatamente non è abbastanza per me. Vorrei approfittare di ngFormController e ngModelController per gestire la convalida, ma l'ambito $ fornito non ha questi valori. – gsanta

+0

Impressionante anche io sono bloccato allo stesso problema e il motivo per cui lo si ottiene indefinito è perché Ionic crea un nuovo ambito sul popup come visto https://github.com/driftyco/ionic/blob/master/js/angular/ service/popup.js # L17 line 280. Mi sto ancora chiedendo perché questo è fatto. Qualsiasi indizio a chiunque. – Zaje

risposta

8

Ho trovato una soluzione brutta, ma funzionante che sto attualmente utilizzando. Se si fornisce a ionicpopup un templateUrl, invece di una stringa di modello con codice fisso, è possibile utilizzare un controller regolare all'interno del modello che esegue la convalida.

In questo momento ho cancellato tutti i pulsanti relativi a ionicpopup (li ho trovati comunque scomodi) e ho fornito i pulsanti necessari all'interno del modello.

E in questo modo posso controllare lo stato del ionicpopup dal controller (ad esempio la chiusura del popup)

Domani creo un esempio jsFiddle, nel caso in cui qualcuno è interessato.

Ma se una soluzione migliore, si prega di condividere: D

+2

puoi per favore condividere l'esempio di jsFiddle che hai menzionato? –

+0

grazie, finalmente ha funzionato come hai detto +1 –

+0

l'unico problema è se il tuo popup scorre a causa della tastiera che scorre nei pulsanti non sono visibili – mtpultz

0

ho trovato la soluzione, funziona per me. Tutto quello che devi modificare è definire nel controller il tuo modulo:

$scope.form = { 
    loginForm: {} 
}; 
    $ionicPopup.show 
     template: ''' 
     <form name="form.loginForm" novalidate> 
      ... 
     </form> 
     ''', 
     scope: $scope, 
     buttons: [ 
     { 
      text: 'Cancel', 
     }, 
     { 
      text: '<b>Save</b>', 
      type: 'button-positive', 
      onTap: (e) -> 

      form = $scope.form.loginForm 
     } 
     ] 
0

Utilizzando la mia soluzione, non è necessario eliminare i pulsanti a comparsa ionici.
Quello che puoi fare per convalidare è usare ng-Model.

Non è necessario utilizzare <form>. Quindi rimuovo <form>.

$ionicPopup.show 
    template: '<input name="username" ng-model="data.username">', 
    scope: $scope, 
    buttons: [ 
    { 
     text: 'Cancel', 
    }, 
    { 
     text: '<b>Save</b>', 
     type: 'button-positive', 
     onTap: (e) 
     var user_name = $scope.data.username 
     // do validation here 
     if(user_name != 'undefined') { 
      ... 
     } 
    } 
    ] 

Preferisco non rimuovere i pulsanti popup ionici. Spero che sia utile per gli altri.
evviva!