创建将在事件上运行函数的自定义指令
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
就会运行一个函数。
我怎样才能以角度重现这个?以下将绑定到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);
//);
【问题讨论】:
【参考方案1】:您不需要event.shiftKey
和event.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以上是关于创建将在事件上运行函数的自定义指令的主要内容,如果未能解决你的问题,请参考以下文章