Angelの `keydown`関数内でDOMが更新されない理由

Question

leftキーボードの矢印を押したとき、以下のコントローラに基づいて、<div>とngShowが表示されるはずです。

$scopeが更新されます（これはコンソールに表示されます）が、DOMは変更されません。

しかし、inputフィールドに何かを入力すると、<div>が表示されます。だから、そのような角度は私が​​としている変更を見ていない。

コントローラ

.controller('TestCtrl', ['$scope', '$document', function($scope, $document) { 
    var keyboardMap = { 37: 'left'}; 
    $document.on('keydown', function (event) { 
     var key = keyboardMap[event.which]; 
     if (key) { 
      console.log('lefty'); 
      $scope.left = true; 
     } 
    }); 
}]); 

ビュー

<div ng-app="TestApp" ng-controller="TestCtrl"> 
    <div ng-show="left" style="height: 100px; width: 100px; border: 1px black solid;"></div> 
    <input ng-model="something"></input> 
</div> 

私はSOには、いくつかの他の同様の質問を読みますが、それらは参考になりまし見つかりませんでした。私はここで理解していない何かのような気がする。

誰もがなぜアップデートしていないのか、どのようにアップデートできるのか分かっていますか？

Answer 1

AngularJSはonイベントについて何も知らないので、$digest()を実行してください。

function TestCtrl($scope, $document) { 
 
    $document.on('keydown', function(event) { 
 
    var keyboardMap = { 
 
     37: 'left' 
 
    }; 
 
    var key = keyboardMap[event.which]; 
 
    if (key) { 
 
     $scope.left = true; 
 
     $scope.$digest() 
 
    } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app ng-controller="TestCtrl"> 
 
    <div ng-show="left" style="height: 100px; width: 100px; border: 1px black solid;"></div> 
 
    <input ng-model="something"> 
 
</div>

Answer 2

$applyブロックでコードをラップ：

if (key) { 
      console.log('lefty'); 
      $scope.$apply(function() { 
       $scope.left = true; 
      }); 
     } 

これはangulars世界の外からのイベントからモデルの更新を強制します。 Documentation

編集：$scope.$digest()これを行う別の方法です。その相違点の説明はRead hereを参照してください。