How to close element on esc button?

Question

I have panel shows on init and hides when I press 'close' icon. How to make panel close when I press 'esc' button? here is panel html:

<div ng-init="vm.onInit()" class="mainContent">
    <div ng-if="vm.bool" class="fade totalFolderList">
        <div flex layout="row" layout-align="end end">
            <div>
                <md-button ng-click="vm.hidePanel()" class="md-fab " aria-label="Use Android">
                    <md-icon md-font-icon="zmdi zmdi-close"></md-icon>
                </md-button>
            </div>
        </div>
        <div layout="row" layout-fill flex>
            <div class="folderListPanel padding-top-10" flex layout="column" layout-align="start center">
                <div>There are {{vm.foldersToJoin}} folder's to join</div>
                <div>
                    <md-input-container>
                        <label></label>
                        <input ng-model="search.name" placeholder="Filter">
                    </md-input-container>
                </div>
                <div style="overflow:auto;" class="whiteFrames">
                    <md-whiteframe class="md-whiteframe-8dp foldersInList capitalize" layout ng-repeat="folder in vm.folderList | filter:search" ng-click="vm.openFolder(folder.id)">
                        <span class="padding-left-10">{{folder.name = vm.getIterationName(folder.metadata)}}</span>
                    </md-whiteframe>
                </div>
            </div>
        </div>
    </div>
</div>

And here is hidePanel() method in controller:

function vm.hidePanel() {
    vm.bool = false;
    var intervalRequests = $timeout(function() {
        $state.go('triangular.work');
    }, 1000);
}

Refer to this answer: http://stackoverflow.com/questions/1160008/which-keycode-for-escape-key-with-jquery — Tisamu, Sep 12 '16 at 09:37

Maciej Sikora · Accepted Answer · 2016-09-12T10:14:29.453

2

Use $document service inside controller. Example:

//inside controller code
$document.bind('keydown', function (e) {

   if (e.keyCode==27){ //27 is ESC
      //here code for hide panel
      vm.hidePanel();// if vm is local variable of controller
   }

});

edited Sep 12 '16 at 10:14

answered Sep 12 '16 at 09:33

Maciej Sikora

19,374
4
49
50

on e.keyCode==27 - doesn't work. For example if I use e.keyCode==13 - works fine....what to do? – Serhiy Sep 12 '16 at 10:11
thank you. it helped. One more question - do you know why 'when I press 'esc' has slower reaction that if i pressed 'enter' for example? – Serhiy Sep 12 '16 at 10:30
@Serhiy i don't know but maybe that ESC calls also builded in browser events. This is only my quess. – Maciej Sikora Sep 12 '16 at 10:33

How to close element on esc button?

1 Answers1