Question

我想更新键盘事件的页面。我通过$ window.document.onkeydown连接了键盘事件。（我知道这不好，但应该有用）

然而，我发现即使模型被更改，页面也不会更新！我在哪里错过了？

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script>
          function Main ($scope, $window) {
            $scope.keyCode = 0;
            $window.document.onkeydown = function (event) {
                $scope.keyCode = event.keyCode;
                console.log($scope.keyCode); //the model is changed here
            };
          }
        </script>
    </head>
    <body ng-app>
        <div ng-controller="Main">
          {{keyCode}}
        </div>
        <script type="text/javascript" src="bower_components/angular/angular.js"></script>
    </body>
</html>

--- ---编辑
这是您可以尝试的代码段 http://plnkr.co/edit/DFUfHzQPla031IEDdCo3?p=preview

Answer 1

每当您想要执行Angular范围之外的表达式时，您需要让Angular知道已经进行了更改，以便它可以执行正确的摘要循环。您可以使用$scope.$apply()方法执行此操作。所以你的例子就变成了：

function Main ($scope, $window) {
    $scope.keyCode = 0;
    $window.document.onkeydown = function (event) {
        $scope.$apply(function () {
            $scope.keyCode = event.keyCode;
            console.log($scope.keyCode);
        });
    };
}

请参阅更新的plunker here

Angular不会更新键盘事件的UI

1 个答案: