# $ionicActionSheet invoked from addEventListener never appears (solved)

**URL:** <https://forum.ionicframework.com/t/ionicactionsheet-invoked-from-addeventlistener-never-appears-solved/16584>\
**Category:** ionic-v1\
**Created:** [January 29, 2015, 6:02am UTC](https://forum.ionicframework.com/t/ionicactionsheet-invoked-from-addeventlistener-never-appears-solved/16584 "2015-01-29T06:02:46Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jim](https://avatars.discourse-cdn.com/v4/letter/j/ac91a4/32.png) [@jim](https://forum.ionicframework.com/u/jim)\
**Post date:** [January 29, 2015, 6:02am UTC](https://forum.ionicframework.com/t/ionicactionsheet-invoked-from-addeventlistener-never-appears-solved/16584/1 "2015-01-29T06:02:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jim](https://avatars.discourse-cdn.com/v4/letter/j/ac91a4/32.png) [@jim](https://forum.ionicframework.com/u/jim)\
**Post date:** [February 2, 2015, 5:11am UTC](https://forum.ionicframework.com/t/ionicactionsheet-invoked-from-addeventlistener-never-appears-solved/16584/2 "2015-02-02T05:11:58Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jim](https://avatars.discourse-cdn.com/v4/letter/j/ac91a4/32.png) [@jim](https://forum.ionicframework.com/u/jim)\
**Post date:** [February 2, 2015, 5:26am UTC](https://forum.ionicframework.com/t/ionicactionsheet-invoked-from-addeventlistener-never-appears-solved/16584/3 "2015-02-02T05:26:08Z")

</div>

Awesome. I wrapped it in a `$timeout`.

All is well with the world.