我想将结帐表单提交到外部 url，它应该会打开一个带有结果的新窗口，但我无法让我的应用程序打开它，也无法在单独的窗口中打开，也使用应用内浏览器。
到目前为止，我所做的是创建一个带有内部表单的指令，并在某个时候从链接器函数调用提交元素。
当我在浏览器中运行时，这会打开一个新窗口（如我所愿）。 问题出现在在设备上运行时，因为它只是替换我视图的内容用新内容无需打开外部窗口。
所以，问题是......当在设备上运行时，我如何在打开新窗口（导航器）或应用内浏览器时发布此表单，并在那里显示结果？
谢谢！！
【问题讨论】：
标签： angularjs cordova ionic-framework ionic
嗯，解决起来很复杂，但最终解决方案“相当”简单。我会在这里发布它以帮助任何其他面临同样问题的人。如果有人有更优雅的解决方案，将受到欢迎。
我最终做的是：
这是代码（请注意我在表单中使用了指令，因此我可以通过链接功能控制何时提交它，并且该数据通过服务与指令共享）：
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>【讨论】：