Iframe loaded twice

ionic-v1
1

Hi

I have a shop app. In that app i have have a checkout form with a button that loads an iframe with payment options from server.

Somehow the page with the iframe triggers it twice and that makes the payment fail. Does anyone have a solution to this?

Simplified code:

<script id="cart.html" type="text/ng-template">    
<button class="button button-block button-energized" ng-click="purchase()">Purchase</button>
</script>

.controller("ShoppingCartCtrl", function($scope, $http, $ionicNavBarDelegate, $q, $state, restaurant, user){

      download_post($http, f_server + "/api/checkout", data)
      .success(function(data, status, headers, config) {
        var d = angular.fromJson(data);

        if(d["success"]){
          console.log("Purchase Success");
          $state.go("purchase");

        } 

})

   <script id="purchase.html" type="text/ng-template">
    <ion-view title="Purchase" ng-controller="PurchaseCtrl">
      <ion-nav-bar class="bar-royal">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>
      </ion-nav-bar>
      <ion-content overflow-scroll="true">
        <div style="height: 100%; width: 100%;">
          <iframe src="http://external.url/payment/start" style="width:100%; height: 100%;"></iframe>
        </div>
      </ion-content>
    </ion-view>
  </script>
2

Ok so i solved it by loading the url of the iframe after the scope has been set.
Still not sure why iframe s are loaded twice though…

Solution

<iframe ng-src="{{iframeUrl | trusted}}" style="width:100%; height: 100%;" iframe-onload="iframeLoadedCallBack()"></iframe>

.controller("FastPurchaseCtrl", function($rootScope, $scope, $state, $http, $ionicNavBarDelegate, $q, restaurant, $cordovaStatusbar, $ionicLoading){
  $ionicLoading.show({
    template: '<i class=""></i>Loading...'
  });
  $scope.iframeUrl = '';
  ionic.Platform.ready(function(){
    $scope.iframeUrl = 'http://url.url';
  });
  $scope.iframeLoadedCallBack = function(){
    $ionicLoading.hide();
  }
});

.directive('iframeOnload', [function(){
  return {
    scope: {
        callBack: '&iframeOnload'
    },
    link: function(scope, element, attrs){
        element.on('load', function(){
            return scope.callBack();
        })
    }
}}])

.filter('trusted', ['$sce', function ($sce) {
    return function(url) {
        return $sce.trustAsResourceUrl(url);
    };
}])

var app = angular.module('myapp', ['ionic', 'ngCordova', 'ngSanitize'])