$ionicActionSheet invoked from addEventListener never appears (solved)

Let’s say that I make an event listener, to listen for a menu button press. Like so:

document.addEventListener("menubutton", handleHardwareMenuKeyPress);

My event handler looks something like this:

function handleHardwareMenuKeyPress() {
   $scope.hideSheet = $ionicActionSheet.show({
     buttons: [
       { text: 'Sam' },
       { text: 'Pull' },
       { text: 'Buttons' }
     ],
     titleText: 'Menu',
     cancelText: 'Cancel',
     cancel: function() {
         $scope.hideSheet();
     },
     buttonClicked: function(index) {
       return true;
     }
   });
};

If I press the menu button, the screen turns darker, as though the action sheet is coming up. But no action sheet comes up. If I hit the hardware back button, the action screen appears for a second, before disappearing. If I call handleHardwareMenuKeyPress() outside of the event listener, everything works just fine.

Has anyone come across this? If so, how’d you fix that jonx?

Thanks.

Doing a little more digging, I noticed that the HTML for the action sheet looked something like this:

<div class="action-sheet-backdrop active" buttons="buttons" style="">
  <div class="action-sheet-wrapper action-sheet-up">
    <div class="action-sheet">
      <div class="action-sheet-group">
        <!-- ngIf: titleText -->
        <!-- ngRepeat: button in buttons -->
      </div>
      <!-- ngIf: destructiveText -->
      <!-- ngIf: cancelText -->
    </div>
  </div>
</div>

So it looks like the ngIf is just throwing out all of the data that I send it. Until, I click on the backdrop, that is. The HTML quickly switches, before transitioning away, to:

<div class="action-sheet-backdrop active" buttons="buttons" style="">
  <div class="action-sheet-wrapper action-sheet-up">
    <div class="action-sheet">
      <div class="action-sheet-group">
        <!-- ngIf: titleText -->
        <div class="action-sheet-title ng-binding" ng-if="titleText" ng-bind-html="titleText">Menu</div>
        <!-- end ngIf: titleText --><!-- ngRepeat: button in buttons --><button class="button ng-binding" ng-click="buttonClicked($index)" ng-repeat="button in buttons" ng-bind-html="button.text">Add Store</button><!-- end ngRepeat: button in buttons --><button class="button ng-binding" ng-click="buttonClicked($index)" ng-repeat="button in buttons" ng-bind-html="button.text">Settings</button><!-- end ngRepeat: button in buttons --><button class="button ng-binding" ng-click="buttonClicked($index)" ng-repeat="button in buttons" ng-bind-html="button.text">Exit</button><!-- end ngRepeat: button in buttons -->
      </div>
      <!-- ngIf: destructiveText --><!-- ngIf: cancelText -->
      <div class="action-sheet-group" ng-if="cancelText"><button class="button ng-binding" ng-click="cancel()" ng-bind-html="cancelText">Cancel</button></div>
      <!-- end ngIf: cancelText -->
    </div>
  </div>
</div>

Can anyone help with this?

Awesome. I wrapped it in a $timeout.

All is well with the world.