Angular does not update UI for keyboard event

Question

I want to update page for keyboard event. I wired the keyboard event through $window.document.onkeydown. (I know this is not good but it is supposed to work)

However, I find that the page is not updating even the model is changed! Where am I missing ?

<!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>

---Edit---
Here is the code snippet you can try http://plnkr.co/edit/DFUfHzQPla031IEDdCo3?p=preview

adamK · Accepted Answer · 2014-07-04 09:35:33Z

3

Whenever you want to execute an expression that is outside Angular's scope you need to let Angular know that a change has been made so it can perform a proper digest cycle. You can do this using the $scope.$apply() method. So your example becomes:

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

Please see updated plunker here

answered Jul 4, 2014 at 9:35

adamK

3,8795 gold badges39 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular does not update UI for keyboard event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related