Wie kann ich ng-if mit ionicPopup verwenden

Question

Ich versuche es zu tun, wenn ich auf den Senden-Button klicken, erscheint ein Popup, wo, wenn die Person die richtige Nachricht eingibt, geht es zum nächsten Bildschirm, wenn es nicht bleibt der Bildschirm das ist.

mein Code: meine controller.js

.controller('loginController', function($scope, $stateParams, $ionicPopup, $ionicHistory, $state) { 

    $scope.Enviar = function(){ 


      var confirmPopup = $ionicPopup.prompt({ 
       title: 'Login', 
       template: 'Pergunta: Digite a P∴S∴ do AP∴?', 
       inputType: 'text', 
       inputPlaceholder: 'Digite a senha', 
       ng-model="login" 
      }); 
      confirmPopup.then(function(res) { 
       if(res) { 
        $state.go('app.home'); 

       } else { 
        console.log('teste'); 
        $state.go('login'); 
       } 
      }) 
    } 

}) 

mein login.html

<ion-view view-title="login"> 
    <ion-content class="login-principal" scroll="true"> 
    <div class="login-imagem"> 
     <img class="full-image" ng-src="img/GOMB.jpg"> 
    </div> 
    <div> 
     <ion-list class="list-inset"> 
      <ion-item class="item-input"> 
      <i class="icon ion-ios-email-outline placeholder-icon"></i> 
      <input type="text" placeholder="E-mail"> 
      </ion-item> 
      <ion-item class="item-input"> 
      <i class="icon ion-ios-locked-outline placeholder-icon"></i> 
      <input type="text" placeholder="Senha"> 
      </ion-item> 
     </ion-list> 
     <div class="row login"> 
      <div class = "col col-50" > 
       <a class="button button-block button-dark" ui-sref="app.cadastroUsuario">Criar conta</a> 
      </div> 
      <div class = "col col-50" > 
       <a class="button button-block button-dark" ng-click="Enviar()">Entrar</a> 
      </div> 
     </div> 
     </div> 
    </ion-content> 
</ion-view> 

Meine Frage ist, wie ng-Modell und ng-falls mit ionicPopup zu benutzen?

Answer 1

$scope.Enviar = function(){ 
      var obj = new String("boa"); 

      $ionicHistory.nextViewOptions({ 
        disableBack : true 
      }) 

      var confirmPopup = $ionicPopup.prompt({ 
       title: 'Login', 
       template: 'Pergunta: Digite a?', 
       inputType: 'text', 
       inputPlaceholder: 'Digite em minusculo' 
      }); 
      confirmPopup.then(function(res) { 
       if(res == obj) { 
        $state.go('app.home'); 
        console.log(res); 
       } else { 
        //console.log('teste'); 
        $state.go('login'); 
        //console.log(res); 
       } 
      }) 
    } 

Answer 2

Anstelle von $ionicPopup.prompt können Sie einfach $ionicPopup.show verwenden und in die Template-Eigenschaft seines Objekts schreiben, was auch immer die Vorlage Sie wollen (mit ng-Modell & ng-if). Sie können auch Schaltflächen mit ihrem anpassbaren Text sowie eine bestimmte Aktion onTap (wie Rückgabewert von Eingabefeldern innerhalb Popup) haben. So können Sie folgende Funktion aufrufen Popup haben:

$scope.showPopup = function() { 
    $scope.data = {} 
    // An elaborate, custom popup 
    var myPopup = $ionicPopup.show({ 
    template: '<input type="password" ng-if="isNotConnected" 
       ng-model="data.wifi" placeholder="Enter Password">', 
    title: 'Enter Wi-Fi Password', 
    subTitle: 'Please use normal things', 
    scope: $scope, 
    buttons: [ 
     { text: 'Cancel' }, 
     { 
     text: '<b>Save</b>', 
     type: 'button-positive', 
     onTap: function(e) { 
      if (!$scope.data.wifi) { 
      //don't allow the user to close unless he enters wifi password 
      e.preventDefault(); 
      } else { 
      return $scope.data.wifi; 
      } 
     } 
     }, 
    ] 
    }); 
    myPopup.then(function(res) { 
    console.log('Tapped!', res); 
    }); 

}; 

Schauen Sie sich diese codepen: https://codepen.io/anon/pen/wqwzPE