如何在 AngularJS 中将 ng-bind 与 document.addEventListener() 一起使用？

【问题标题】：How to use ng-bind with document.addEventListener() in AngularJS?如何在 AngularJS 中将 ng-bind 与 document.addEventListener() 一起使用？
【发布时间】：2017-12-11 18:39:33
【问题描述】：

我必须在 AngularJS 上为我的页面制作 hotkay。我用

document.addEventListener()

方法 keyDownTextField() 设置值 wordToShow：

export class listenKey {

    constructor() {
        document.addEventListener("keydown", (e) => this.keyDownTextField(e), false);
    }

    keyDownTextField(e: any) {
        var keyCode = e.keyCode;
        this.logKey(keyCode);

        this.wordToShow = "Hello world!";
    }

    logKey(key: any) {
        console.log( key );
    }
}

有模板：

<div ng-click="$ctrl.logKey()" ng-bind="$ctrl.wordToShow"></div>

问题是：ng-bind 在单击 div 时有效，但在 addEventListener 注册按键被按下时无效。如何解决？

【问题讨论】：

标签： javascript html angularjs keypress ng-bind

【解决方案1】：

AngularJS 不知道在事件侦听器回调中触发摘要循环。

您可以将this.keyDownTextField(e) 换成超时：

document.addEventListener("keydown", (e) => $timeout(() => this.keyDownTextField(e), 0), false);

别忘了注入$timeout服务！

或者，您也可以在keyDownTextField(e: any) 中的this.wordToShow = "Hello world!"; 之后调用$scope.$apply。别忘了注入$scope！

您可能还想检查 ng-keypress (ngKeyPress) 中内置的 AngularJS。

【讨论】：