Опубликовать форму в новом окне / inAppBrowser в Ionic (Cordova)

Question

Я хочу отправить форму извлечения на внешний URL-адрес, который должен открыть новое окно с результатом, но я не могу заставить свое приложение открывать его ни в отдельном окне, ни в браузере приложения.

То, что я делал до сих пор, - это создание директивы с формой внутри, а из функции компоновщика вызовите элемент submit в какой-то момент.

Когда я работаю в браузере, это открывает новое окно (как я хочу). Проблема возникает при запуске на устройстве, потому что он просто ЗАМЕНЯЕТ содержимое моего представления новым содержимым БЕЗ ОТКРЫТИЯ внешнего окна.

Итак, вопрос... при запуске на устройстве, как я могу опубликовать эту форму, открыв новое окно (навигатор) или в приложении-браузере, и показать там результаты?

Спасибо!!

Answer 1

Ну, это было сложно понять, но в конце концов решение "довольно" простое. Я опубликую это здесь, чтобы помочь другим людям, сталкивающимся с той же самой проблемой. Если у кого-то есть более элегантное решение, оно будет приветствоваться.

Что я закончил делать, так это:

1. Откройте новое окно с моим собственным шаблоном с угловым и моей формы.
2. В новом контроллере окна создайте функцию обратного вызова в объекте глобального окна
3. Из старого окна после события loadtop выполните этот обратный вызов
4. Размещенная форма в новом окне перенаправляет на страницу назначения (это то, что я хотел).

Вот код (обратите внимание, что я использую директиву с формой, чтобы я мог контролировать, когда отправить ее из функции ссылки, и чтобы данные передавались директиве через службу):

angular.module('starter', ['ionic'])


.constant('cartData', {
        redirectUrl: 'https://test.mycart.com/hpp/pay.shtml',
        redirectMethod: 'POST',
        redirectData: {
                'formParam1': 'value1',
                'formPara2': 'value2'
            }
    }
)


.controller('InitCtrl', function($cordovaInAppBrowser, $scope, cartData) {
     
    $scope.openView = function(){
    
        var counter = 0;
        if(ionic.Platform.isWebView()){

            $ionicPlatform.ready(function() {                    
                //this is the cordova in app web view
                var ref = $cordovaInAppBrowser.open('payment.html', '_blank', {location:'yes'});

                $rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event){
                    if(counter < 1){
                        //prevent the callback to be called several times
                        $cordovaInAppBrowser.executeScript({
                            code: 'window.paymentCallback('+ angular.toJson(cartData) +');'
                        });
                        counter++;
                    }
                });
            });
        }
    };
    
})




//and then in payment.js


window.paymentCallback = null;

angular.module('payment', [])


.directive('autoSubmitForm', ['$timeout', 'autoSubmitFormDelegate', function($timeout, autoSubmitFormDelegate) {
    return {
        replace: true,
        scope: {},
        template: '<form action="{{formData.redirectUrl}}" method="{{formData.redirectMethod}}">'+
                      '<div ng-repeat="(key,val) in formData.redirectData">'+
                           '<input type="hidden" name="{{key}}" value="{{val}}" />'+
                      '</div>'+
                  '</form>',
        link: function($scope, element, $attrs) {
            
            autoSubmitFormDelegate.submitCallback = function(data) {
                $scope.formData = data;
                $timeout(function() {
                    element[0].submit();
                });
             };
        }
    }
}])

.factory('autoSubmitFormDelegate', function(){
    var delegate = {};
    
    delegate.submitCallback = null;
    
    delegate.submitForm = function(data){
        if(delegate.submitCallback){
            delegate.submitCallback(data);
        }
    }
    
    return delegate;
})

.controller('PaymentCtrl', function($scope, $timeout, $window, $sce, autoSubmitFormDelegate){


    $window.paymentCallback = function(data){
        console.log("callback called");
        data.redirectUrl = $sce.trustAsResourceUrl(data.redirectUrl);    
        $timeout(function(){
            autoSubmitFormDelegate.submitForm(data);
        });
    };
    
})

<link href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script>


<body ng-app="starter">

  <ion-view view-title="Init">
  <ion-content>
    <h1>Init</h1>
      <button class="button button-positive" ng-click="openView()">Open new view</button>
  </ion-content>
</ion-view>
  
</body>



<script type="text/ng-template" id="payment.html">

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
    <title></title>

    <script src="../lib/angular/angular.min.js"></script>
    <script src="../js/payment.js"></script>
  </head>

  <body ng-app="payment" ng-controller="PaymentCtrl">
    <auto-submit-form></auto-submit-form>
  </body>
</html>

</script>