iOS share sheet fires twice [Cordova/Ionic/Angular]

Question

For some reason, the share sheet in iOS is firing twice when I press the n-click share button in my app menu (i.e. first one sheet comes into view, followed by another on top of it).

menu.html...

<ion-nav-buttons side="right">
  <button ng-cloak ng-if="sharable" ng-click="systemShare()" class="button button-icon button-clear ion-share"></button>
</ion-nav-buttons>

controller.js...

.controller('dataCtrl', function($scope, $rootScope, $stateParams, dataService, $cordovaSocialSharing) {

dataService.getData($stateParams.itemId).then(function(data){
   $scope.data = data;

    // set sharable
    $rootScope.sharable=true;
    document.addEventListener("deviceready", function () {
      $rootScope.systemShare = function(){
      $cordovaSocialSharing
        .share($scope.data.title, $scope.data.title, null, $scope.data.url)
        .then(function(result) {
          // Success!
        }, function(err) {
          // An error occured. Show a message to the user
        },false);
      }
    });
  });
})

I have a couple controllers that follow this same pattern (and the code for each is basically identical in terms of what is shown above). They fetch the data, populate the view, then define the share button functionality and parameters using $rootScope.

The first time the button is presses it fires twice. Sometimes it happens a second time, but not always. The double-firing happens regardless of which version of the view/controller above is used first (that is, I have a controller for tours and a controller for stops: both are pretty much the same and whichever one I go to first will exhibit this behavior).

I'm guessing I need to change the way I define the systemShare() function, but I'm not sure how to do it other than via $rootScope since it needs to be accessible via the global menu.

Answer 1

Looks like this is an Ionic bug. See: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin/issues/465

The suggested fix (which worked for me) is to wrap the call in a timeout.

    setTimeout(function() {
        $cordovaSocialSharing
          .share('Subject', 'Message', null, 'http://www.google.com') // Share via native share sheet
          .then(function(result) {
              console.log(result);
              }, function(err) {
              alert('Sharing failed. Please try again.');
              });
    }, 500);