Serhiy Serhiy - 1 year ago 141
HTML Question

How to close element on esc button?

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">
<md-button ng-click="vm.hidePanel()" class="md-fab " aria-label="Use Android">
<md-icon md-font-icon="zmdi zmdi-close"></md-icon>
<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>
<input ng-model="" placeholder="Filter">
<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(">
<span class="padding-left-10">{{ = vm.getIterationName(folder.metadata)}}</span>

And here is hidePanel() method in controller:

function vm.hidePanel() {
vm.bool = false;
var intervalRequests = $timeout(function() {
}, 1000);

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download