モーダルポップアップでのキーボード操作の実装[Angular JS]

Question

モーダルポップアップのために角度jでカスタムコンポーネントを作成しました。すべてうまく動作します。今私はこれにキーボードの相互作用を実装したいと思います。つまり、モーダルポップアップにメッセージが表示されたら、Enterキーを押してユーザーが閉じることができるはずです。事前

で

(function() { 
    "user strict"; 
    var myApp = angular.module("myApp"); 
    myApp.component("ModalDialog", { 
     bindings: { 
      show: '=', 
      title: '=', 
      type: '=', 
      okCallback: '&?', 
      okText: '=?', 
      cancelCallback: '&?', 
      cancelText: '=?' 
     }, 
     replace: true, 
     transclude: true, 
     controller: function ($element, $attrs) { 
      var $ctrl = this; 
      $ctrl.dialogStyle = {}; 
      if ($attrs.width) 
       $ctrl.dialogStyle.width = $attrs.width; 
      if ($attrs.height) 
       $ctrl.dialogStyle.height = $attrs.height; 
      if ($attrs.okCallback) 
       $ctrl.okEnabled = true; 
      if ($attrs.cancelCallback) 
       $ctrl.cancelEnabled = true; 
      $ctrl.hideModal = function() { 
       $ctrl.show = false; 
      }; 
      $ctrl.ok = function() { 
       $ctrl.okCallback(); 
      }; 
      $ctrl.cancel = function() { 
       $ctrl.cancelCallback(); 
      } 
     }, 
     template: '<div class="ng-modal" data-ng-show="$ctrl.show">\n' + 
     '<div class="ng-modal-overlay" ng-click="$ctrl.hideModal()"></div>\n' + 
     '<div class="ng-modal-dialog" ng-class="{\'warning\' : $ctrl.type.toLowerCase() === \'warning\'}" data-ng-style="$ctrl.dialogStyle">\n' + 
     '<div class="ng-modal-dialog-header">{{$ctrl.title}}</div>\n' + 
     '<div class="ng-modal-dialog-content" ng-transclude></div>\n' + 
     '<div class="ng-modal-dialog-footer ng-button-group">\n' + 
     '<button data-ng-show="$ctrl.okEnabled" class="ng-button-primary" data-ng-click="$ctrl.ok()">{{$ctrl.okText}}</button>\n' + 
     '<button data-ng-show="$ctrl.cancelEnabled" class="ng-button-secondary" data-ng-click="$ctrl.cancel()">{{$ctrl.cancelText}}</button>\n' + 
     '</div>' + 
     '</div>\n' + 
     '</div>' 
    }); 
})(); 

HTML

<ng-modal-dialog show='$scope.alertModal.shown' width='400px' data-title='$scope.alertModal.title' data-type="$scope.alertModal.type" ok-callback="$scope.closeAlertModal()" ok-text="$scope.alertModal.okText"> 
    {{$scope.alertModal.message}} 
</ng-modal-dialog> 

JS

$scope.closeAlertModal = function(){ 
    $scope.alertModal.shown=! $scope.alertModal.shown; 
}; 

感謝

Answer 1

あなたのコントローラでは、キーダウンイベントを「聞く」必要があります。このような

何か：

windowElem.on("keydown", function (event) { 

    switch (event.which){ 
      // escape key 
      case 27: 
       doStuff();    
       break;  
      //enter key 
      case 13: 
      doOtherStuff(); 
      break;      
    } 
});