Ionic закрыть IonicPopup, когда кнопка делает вызов Ajax

Question

Ionic закрыть IonicPopup, когда кнопка делает вызов Ajax

0

Является новым как угловым, так и ионным. У меня есть всплывающее окно на моей странице, где я показываю пользователю поле ввода для ввода OTP и кнопки отправки. Когда я нажимаю кнопку отправки, я делаю вызов Ajax, чтобы проверить, действительно ли OTP.

Но я не могу закрыть всплывающее окно с помощью метода.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 обещание всплывающего окна не вызывается.

aneeshere 05 нояб. 2015, в 14:15

Источник

Теги:

angularjs

ionic

2 ответа

0

вам не нужно вызывать 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
});

Peace Pan 05 нояб. 2015, в 13:47

0

Если я не вызову warnDefault, всплывающее окно закроется даже до запуска Ajax. Проблема здесь в том, что если введенный OTP неверен, всплывающее окно должно остаться с сообщением об ошибке под входом. Так что предотвращение дефолта необходимо здесь.
aneeshere 05 нояб. 2015, в 15:19

Ещё вопросы

Если я не вызову warnDefault, всплывающее окно закроется даже до запуска Ajax. Проблема здесь в том, что если введенный OTP неверен, всплывающее окно должно остаться с сообщением об ошибке под входом. Так что предотвращение дефолта необходимо здесь.

aneeshere · Accepted Answer · 2015-11-05T14-06-00.000Z

Закончилось решение этого.

Это решение будет работать только в том случае, если на вашей странице имеется ровно один 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){
    });
}

здорово, это действительно помогло. У меня была проблема с закрытием моего всплывающего окна, когда запрос проходит и переходил в другое состояние моего приложения. это просто застрянет. это лучший способ заставить закрыть ионное всплывающее окно