離子關閉IonicPopup當按鈕發出Ajax呼叫時

對於角和離子都是新的。我在我的頁面中有一個彈出窗口，我向用戶顯示輸入字段以輸入OTP和提交按鈕。當我提交按鈕點擊，我做檢查的Ajax調用如果OTP是有效的。離子關閉IonicPopup當按鈕發出Ajax呼叫時

，但我不能與.close方法關閉彈出。請幫助

var OTPPopup = $ionicPopup.show({ 
    title: 'OTP VERIFICATION', 
    templateUrl: 'templates/login/otp.html', 
    scope: $scope, 
    buttons : [{ 
     text: 'Confirm OTP', 
     type: 'button-assertive', 
     onTap : function(e) { 
      e.preventDefault(); 
      var validateResponse = validateOTP(); 
      validateResponse.then(function(response){ 
       console.log('success', response); 
       return response; 
      }); 
     } 
    }] 
}).then(function(result){ 
    console.log('Tapped', result); 
    OTPPopup.close(); 
});

及以下功能validateOTP

function validateOTP() { 
    var requestObj = { 
     authentication: { 
      email_id: $scope.loginForm.email, 
      security_code: $scope.OTP 
     } 
    }; 
    return $q(function(resolve, reject) { 
     activateUser(requestObj, function(response){ 
      if(response.error == null && response.data.isSuccess) { 
       console.log('validate correct'); 
       resolve(response); 
      } 
     }, function(response){ 
      return 'error'; 
     }); 
    }); 
}

activateUser是我的服務，這使得Ajax調用。請讓我知道我該如何實現這一目標。

console.log('success', response)被打印在.then裏面，但在從onTap返回一些東西后，彈出窗口的承諾沒有被調用。

來源

2015-11-05 aneeshere

端起來解決它自己。

只有當您的頁面上只有一個ionicPopup時，此解決方案纔有效。我只寫這行代碼這樣的伎倆

$ionicPopup._popupStack[0].responseDeferred.resolve();

這會自動關閉彈出。現在使用普通的Ajax，整個代碼更簡單，沒有任何q承諾。

var OTPPopup = $ionicPopup.show({ 
    title: 'OTP VERIFICATION', 
    templateUrl: 'templates/login/otp.html', 
    scope: $scope, 
    buttons : [{ 
     text: 'Confirm OTP', 
     type: 'button-assertive', 
     onTap : function(e) { 
      // e.preventDefault() will stop the popup from closing when tapped. 
      e.preventDefault(); 
      validateOTP(); 
     } 
    }] 
});

，並在接下來的功能

function validateOTP() { 
    var requestObj = { 
     authentication: { 
      email_id: $scope.loginForm.email, 
      security_code: $scope.loginForm.OTP 
     } 
    }; 
    activateUser(requestObj, function(response){ 
     if(response.error == null && response.data.isSuccess) { 
      localStorage.setLocalstorage = response.data.user[0]; 
      $ionicPopup._popupStack[0].responseDeferred.resolve(); 
      $state.go('dashboard.classified'); 
     } 
    }, function(response){ 
    }); 
}

來源

2015-11-05 15:17:32 aneeshere

這真的很有幫助。當請求經過並轉換到我的應用程序的另一個狀態時，我遇到了彈出式關閉問題。它會被卡住。這是強制關閉離子彈出的最佳方式 – Flash

你不需要調用e.preventDefault（）;

你只是只返回validateOTP承諾

ionicPopup將等待的承諾，然後關閉彈出

var OTPPopup = $ionicPopup.show({ 
    title: 'OTP VERIFICATION', 
    template: 'templates/login/otp.html', 
    scope: $scope, 
    buttons : [{ 
     text: 'Confirm OTP', 
     type: 'button-assertive', 
     onTap : function() { 
      return validateOTP(); 
     } 
    }] 
}).then(function(result){ 
    console.log('closed', result); // result is the activateUser resolve response 
});

來源

2015-11-05 15:16:19

如果我不叫了preventDefault，它甚至會在阿賈克斯開始前關閉彈出。這裏的問題是，如果輸入的OTP不正確，彈出窗口必須保留輸入下方的錯誤消息。因此，需要在此處設置preventDefault。 – aneeshere

離子關閉IonicPopup當按鈕發出Ajax呼叫時

回答

相關問題