Angular keypress monitor failing to accurately refresh scope

Question

Angular keypress monitor failing to accurately refresh scope

I have set up keyboard event listeners for the left, right, and esc keys.

Each key is associated with a function in the controller that should update some scope variables.

Although the functions are being triggered when the keys are pressed, it appears that the scope variables are not being updated as expected.

Could this be due to a scope issue? Is there a problem with binding these events to the body element?

angular.element( document.body ).bind('keydown keypress', function (event)
{
  if(event.which === 27) // 27 = esc key
  {
    $scope.toggleSize();
    // $scope.$apply(function() {
    //  $scope.fullscreen = !$scope.fullscreen;
    // });
    console.log('scope', $scope.fullscreen);
    event.preventDefault();
  } else if(event.which === 37) {
    console.log('next');
    $scope.goToNextSection('currentSection', $scope.slides);
  } else if(event.which === 39) {
    console.log('prev');
    $scope.goToPreviousSection('currentSection', $scope.slides);
  }
});

javascript angularjs dom-events

Answer 1

Answer №1

Angular updates bindings within its scope during a digest cycle. Typically, Angular triggers a digest automatically in response to events. However, manual triggering is necessary at times, as seen here.

When using jqLite/jQuery to listen to DOM events, it's important to inform Angular to initiate a digest after modifying the scope. This can be achieved by calling the $apply() method:

angular.element( document.body ).bind('keydown keypress', function (event)
{
  if(event.which === 27) // 27 = esc key
  {        
    $scope.$apply(function() {        
      $scope.toggleSize();
    });

    console.log('scope', $scope.fullscreen);
    event.preventDefault();
  } else if(event.which === 37) {
    $scope.$apply(function() {
      $scope.goToNextSection('currentSection', $scope.slides);
    });
    console.log('next');
  } else if(event.which === 39) {        
    $scope.$apply(function() {
      $scope.goToPreviousSection('currentSection', $scope.slides);
    });
    console.log('prev');
  }
});

It's advisable to delve deeper into scopes and the digest cycle. The Angular documentation serves as an excellent starting point.

Lastly, consider utilizing a directive instead of listening to DOM events directly in your controller.

Answer 2

Angular updates bindings within its scope during a digest cycle. Typically, Angular triggers a digest automatically in response to events. However, manual triggering is necessary at times, as seen here.

When using jqLite/jQuery to listen to DOM events, it's important to inform Angular to initiate a digest after modifying the scope. This can be achieved by calling the $apply() method:

angular.element( document.body ).bind('keydown keypress', function (event)
{
  if(event.which === 27) // 27 = esc key
  {        
    $scope.$apply(function() {        
      $scope.toggleSize();
    });

    console.log('scope', $scope.fullscreen);
    event.preventDefault();
  } else if(event.which === 37) {
    $scope.$apply(function() {
      $scope.goToNextSection('currentSection', $scope.slides);
    });
    console.log('next');
  } else if(event.which === 39) {        
    $scope.$apply(function() {
      $scope.goToPreviousSection('currentSection', $scope.slides);
    });
    console.log('prev');
  }
});

It's advisable to delve deeper into scopes and the digest cycle. The Angular documentation serves as an excellent starting point.

Lastly, consider utilizing a directive instead of listening to DOM events directly in your controller.

Answer 3

Answer №2

For AngularJS to stay in sync with jQuery events, it must detect when one occurs and then initiate a $digest cycle for view updates.

angular.element( document.body )
   .on('keydown keypress', function (event) {
       angular.element( document.body ).scope().$apply(function() {
           if(event.which == 27)
           ... etc ...
       });
   });

Answer 4

For AngularJS to stay in sync with jQuery events, it must detect when one occurs and then initiate a $digest cycle for view updates.

angular.element( document.body )
   .on('keydown keypress', function (event) {
       angular.element( document.body ).scope().$apply(function() {
           if(event.which == 27)
           ... etc ...
       });
   });

Angular keypress monitor failing to accurately refresh scope

Answer №1

Answer №2

Similar questions

What is the process for deducting the ordered quantity from the available quantity once an order is confirmed

What is the best method for transferring states between components?

Steer clear of using $rootScope.$on as it may lead to memory leaks

Displaying Array Information in JavaScript

Event on FullCalendar is directing to an incorrect URL

Obtaining and storing multiple checkbox selections in a database using a JSP page

What methods can be used to retrieve text data from a website built with Angular technology?

Ensuring input validity and blocking changes if not compliant with AngularJS patterns

Capturing mouse clicks in Javascript: a guide to detecting when the mouse moves between mousedown and mouseup events

Is it possible to use Ajax post with localhost on Wamp server?

Organizing numerical values within for loops

Transfer a table row between tables - AngularJS

The PureComponent FlatList does not refresh properly even after including extraData={this.state} as a prop

Genvalidator: Validate forms by checking for checkbox selection

The watch feature is not functional when used within a modal that has been included

Verify if the JSON attribute is empty

Passing parameters to an Angular 2 component

Nodejs image validation not working as expected

Store the user's link for future reference and quickly navigate to the TransferPage in 3 seconds. Then, return

To close the menu, simply tap on anywhere on the screen