[angularjs]单击按钮在角绑定热键

标签: jQuery AngularJS
发布时间: 2017/4/16 3:07:47
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有一个 div,具有 ng-click 事件︰

<div class="modalWindowClose" ng-click="closeSettings(user, users);"><i class="fa fa-times"></i></div>

我想要退出键按下时,最好是在 HTML 本身内单击的元素。 就像这个样子︰

<div class="modalWindowClose" hotkey="{esc:'click this element'}" ng-click="closeSettings(user, users);"><i class="fa fa-times"></i></div>

最好的方法来做这种事是什么?我试着由首席花式裤角热键的使用,但它没有让我请单击特定的元素,只运行一个函数。

解决方法 1:

在评论的那样,您可能应该编写自定义 hotkey 指令。我会设计简单像这样︰

.directive('hotkey', function() {
  return {
    link: function(scope, element, attrs) {
      var config = scope.$eval(attrs.hotkey)
      angular.forEach(config, function(value, key) {
        angular.element(window).on('keydown', function(e) {
          if (e.keyCode === Number(key)) {
            element.triggerHandler(value)  
          }
        })
      })
    }
  }
})

然后它会用在 HTML 中,像这样︰

<div hotkey="{27: 'click'}" ng-click="closeSettings(user, users);">Close</div>

关键代码"27"在哪里 (27 是 esc 键) 和价值 click 对应于此元素上触发的操作。

查阅的用法和演示它在行动如下。

angular.module('demo', [])

.controller('DemoController', function($scope) {
  $scope.closeSettings = function() {
    console.log('closeSettings')
  }
})

.directive('hotkey', function() {
  return {
    link: function(scope, element, attrs) {
      var config = scope.$eval(attrs.hotkey)
      angular.forEach(config, function(value, key) {
        angular.element(window).on('keydown', function(e) {
          if (e.keyCode === Number(key)) {
            element.triggerHandler(value)  
          }
        })
      })
    }
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

<div ng-app="demo" ng-controller="DemoController">
  <div class="modalWindowClose" hotkey="{27: 'click'}" ng-click="closeSettings(user, users);"><i class="fa fa-times"></i> Close</div>
</div>

官方微信
官方QQ群
31647020