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

Posted

技术标签:

【中文标题】创建将在事件上运行函数的自定义指令【英文标题】:Create custom directive that will run a function on an event 【发布时间】:2018-09-28 22:59:33 【问题描述】:

在 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 的文本区域内换行,然后如果仅按下enter 就会运行一个函数。

我怎样才能以角度重现这个?以下将绑定到keyupkeydown 事件,但我需要知道如何获取该函数,然后在正确的上下文中运行它。

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);
      //);
    
  

【问题讨论】:

【参考方案1】:

您不需要event.shiftKeyevent.which。 Angular 提供了一个很好的高级 API,用于以声明方式处理事件。您只需在 @HostBinding() 参数中键入 keydown.shift.enter

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

【讨论】:

要添加到答案,调用函数并传递参数,您必须与当前上下文绑定:[cdEnter]="callback.bind(this, 'Hello ', 'world!')stackblitz.com/edit/angular-wuokme

以上是关于创建将在事件上运行函数的自定义指令的主要内容,如果未能解决你的问题,请参考以下文章

vue3.2 setup 之局部自定义指令

调用 $scope 函数的自定义指令导致 $rootScope:infdig

vue3自定义指令详解

vue自定义指令(过滤器/函数)保留小数点后两位

vue自定义指令,包装函数节流。

【vue】自定义指令限制纯数字或者带小数点输入值