AngularJSのdocument.addEventListener（）でng-bindを使用するにはどうすればよいですか？

Question

私はAngularJSの私のページのためにホットケーキを作る必要があります。私は

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> 

問題はあるが。 divがクリックされたときにng-bindは機能しますが、addEventListenerがthを登録するときには機能しませんキーが押されたとき。どのようにそれを解決するには？

Answer 1

AngularJSは、イベントリスナーのコールバックでダイジェストサイクルをトリガーすることを知らない。

あなたはタイムアウトにthis.keyDownTextField(e)をラップすることができます：

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

は$timeoutサービスを注入することを忘れないでください！

また$scope.$applyは、this.wordToShow = "Hello world!";の後にkeyDownTextField(e: any)に電話することもできます。 $scopeを忘れずに注射してください！

ng-keypress（ngKeyPress）で作成されたAngularJSを確認することもできます。