angularjs - link - ionic href open browser

Publique un formulario en una nueva ventana/inAppBrowser en Ionic(Córdoba)

Question

Deseo enviar un formulario de finalización de compra a una URL externa, que debe abrir una nueva ventana con el resultado , pero no puedo hacer que mi aplicación se abra ni en una ventana separada, ni usar el navegador de la aplicación en línea.

Lo que he hecho hasta ahora es crear una directiva con el formulario adentro, y desde la función del enlazador, llamar al elemento enviar en algún momento.

Cuando estoy ejecutando en el navegador, esto abre una nueva ventana (como yo quiero). El problema aparece cuando se ejecuta en el dispositivo , porque simplemente REEMPLAZA el contenido de mi vista con el nuevo contenido SIN ABRIR una ventana externa .

Entonces, la pregunta es ... cuando se ejecuta en el dispositivo, ¿cómo puedo publicar este formulario abriendo una nueva ventana (navegador) o in-app-browser, y mostrar los resultados?

¡¡Gracias!!

Answer 1

Bueno, ha sido complejo resolverlo, pero al final la solución es "bastante" simple. Lo publicaré aquí para ayudar a otras personas que enfrentan el mismo problema. Si alguien tiene una solución más elegante, será bienvenida.

Lo que terminé haciendo es:

1. Abra la nueva ventana con mi propia plantilla con angular y mi formulario.
2. En el nuevo controlador de ventana, crea una función de devolución de llamada en el objeto de ventana global
3. Desde la ventana anterior, después del evento de carga de carga, ejecuta esa devolución de llamada
4. El formulario publicado en la nueva ventana redirige a la página de destino (eso es lo que quería).

Aquí está el código (Observe que estoy usando una directiva con el formulario, para poder controlar cuándo enviarlo, desde la función de enlace, y que los datos se comparten con la directiva a través de un servicio):

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>