Question

使用作为angularjs的重度用户的第三方软件，有几个链接图标，其中ng-click =＆＃34; ...＆＃34;我想用键盘上的按键触发的方法（通过angular或jquery）。

理想情况下，我希望能够使用右键和右键浏览图标。左键箭头，然后按＆＃34;输入＆＃34;触发它，但如果它适用于大部分任务，替代解决方案是直接使用键盘上的箭头键触发这些方法。

代码示例：

<a class="button one" ng-click="someMethod()" ng-if="!dial.source">
    <i class="location"></i>
</a>
<a class="button two" ng-click="otherMethod()" ng-if="!dial.source">
    <i class="location"></i>
</a>

如果有人可以提供帮助，我会很感激！

Answer 1

您可以使用Angular Hotkeys库：http://chieffancypants.github.io/angular-hotkeys/

或者Angular UI项目中的Keypress模块：http://angular-ui.github.io/ui-utils/#/keypress

我没有使用热键库的经验，因此我提供了Keypress模块的示例。

您的图标位于某个容器<div>中，您需要在该div上定义一个事件侦听器。像这样：

<div  ui-keydown="{'ctrl-enter':'vm.someMethodShortcut($event)', 'ctrl-home':'vm.someOtherMethodShortcut($event)'}">
  ... your old HTML ...
</div>

控制器

    var that = this;
    this.someMethodShortcut = function (event: KeyboardEvent) {
        event.preventDefault();
        event.stopPropagation();

        //Call the original method
        var args = Array.prototype.slice.call(arguments, 1);
        var func = scope[functionName];
        return that.someMethodShort.apply(null, args.concat(Array.prototype.slice.call(arguments)));
    };

$event表示实际的KeyboardEvent，然后可以在控制器中捕获或取消。

文档确实很短，我担心你必须阅读源代码才能真正理解它是如何工作的。我相信热键有更好的API，它不能作为指令，所以你不需要搞乱html。但抱歉，我不能给你工作的例子，我没有用它（还）

Angularjs - 在按键上触发ng-click方法

1 个答案: