Angular Ctrl点击?

时间:2014-11-27 21:10:58

标签: javascript angularjs events click ctrl

当用户按 Ctrl 点击?

时,如何捕获

我可以使用以下方式进行单击:

<input ng-click="some_function()"/>

但是我需要这样的东西:

<input ng-CTRL-click="some_nice_function()"/>

这可能吗?

2 个答案:

答案 0 :(得分:54)

<强> HTML

<input ng-click="some_function($event)"/>

<强> JS

$scope.some_function = function(event){
    if (event.ctrlKey)
    {
       // logic here
    }
}

答案 1 :(得分:0)

您必须创建自己的ctrl-click指令。为此,请在编辑器中导航至“指令”文件夹并创建一个。

您可以通过终端写入来完成:

ng generate directive ctrl-click

创建后,您必须按如下所示对其进行编辑:

import { 
    Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Output, Renderer2 } from '@angular/core';

@Directive({
    // tslint:disable-next-line:directive-selector
    selector: '[ctrl-click]',
})

export class CtrlClickDirective implements OnInit, OnDestroy {
    private unsubscribe: any;

    // tslint:disable-next-line:no-output-rename
    @Output('ctrl-click') ctrlClickEvent = new EventEmitter();

    constructor(private readonly renderer: Renderer2, private readonly element: ElementRef) {}

    ngOnInit() {
        this.unsubscribe = this.renderer.listen(this.element.nativeElement, 'click', event => {
            if (event.ctrlKey) {
                event.preventDefault();
                event.stopPropagation();
                // unselect accidentally selected text (browser default behaviour)
                document.getSelection().removeAllRanges();

                this.ctrlClickEvent.emit(event);
            }
        });
    }

    ngOnDestroy() {
        if (!this.unsubscribe) {
            return;
        }
        this.unsubscribe();
    }
}

如果与“ spec.ts”文件有冲突,则可以注释其构造函数。

最后,如果尚未自动添加,则需要将其添加到 app.modules.ts 文件:

import { CtrlClickDirective } from './shared/directives/ctrl-click.directive';

@NgModule({
imports: [
    ...
    CtrlClickDirective
],

然后,您可以在html文件中使用它。

注意:您不能在同一元素上同时为(单击)和(ctrl单击)添加侦听器。 (点击)事件每次都会触发。如果需要两个事件侦听器,则需要嵌套它们,如下所示:

<a (click)="this.openSomething(params...)" style="cursor: pointer">
    <span (ctrl-click)="this.openSomethingNewTab(params...)">New Tab</span>
</a>

这应该很好,希望对您有所帮助。