Question

在angularjs中，我有一个指令：

export default angular.module('cd.enter', [])
    .directive('cdEnter', () => {
        return {
            link: (scope, element, attrs) => {
                element.bind("keydown", (event) => {
                    if (!event.shiftKey && event.which === 13) {
                        event.preventDefault();
                    }
                });

                element.bind("keyup", (event) => {
                    if (!event.shiftKey && event.which === 13) {
                        event.preventDefault();
                        scope.$apply(() => {
                            scope.$eval(attrs.cdEnter);
                        });
                    }
                });
            }
        }
    });

这将允许带有shift + enter的textarea内的换行符，然后在仅按enter时运行一个函数。

如何以角度重现？以下内容将绑定到keyup和keydown事件，但我需要知道如何获取该函数，然后在正确的上下文中运行它。

import { Directive, Input, HostListener } from '@angular/core';

@Directive({
  selector: '[cdEnter]'
})
export class EnterDirective {
  @Input() cdEnter: Function;

  constructor() { }

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    if (!event.shiftKey && event.which === 13) {
      event.preventDefault();
    }
  }

  @HostListener('keyup', ['$event']) onKeyUp(event) {
    if (!event.shiftKey && event.which === 13) {
      event.preventDefault();
      //How to perform the equivalent in Angular
      //scope.$apply(() => {
      //  scope.$eval(this.cdEnter);
      //});
    }
  }
}

Answer 1

您不需要event.shiftKey和event.which。 Angular提供了一个很好的高级API，用于以声明方式处理事件。您只需在keydown.shift.enter args中输入@HostBinding()即可。

import { Directive, Input, HostListener } from '@angular/core';

@Directive({
  selector: '[cdEnter]'
})
export class EnterDirective {
  @Input() cdEnter: Function;

  constructor() { }

  @HostListener('keydown.shift.enter', ['$event'])
  onKeyUp(event: any) {
    event.preventDefault();
    this.cdEnter();
  }
}

Live demo

创建将在事件上运行函数的自定义指令

1 个答案: