javascript - Angular 击键观察器未正确更新范围

Question

我正在监视键盘事件，特别是向左、向右和 esc。

每个函数都绑定(bind)到一个函数，该函数在页面 Controller 中执行某些作用域函数。

当按下按键时，这些函数确实会被调用，但是，应该在这些函数中更新的范围变量似乎没有执行任何操作。

是否存在范围问题？我将这些输入事件绑定(bind)到 body 是否有问题？

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);
  }
});

Answer 1

Angular 仅在摘要循环运行时更新绑定(bind)到范围的内容。大多数时候，Angular 会自动触发摘要以响应某些事件。如果不是这种情况，您需要自己做。这正是这里发生的事情。

当您使用 jqLit​​e/jQuery 监听 DOM 事件时，您需要告诉 Angular 在您更改范围内的某些内容后触发摘要。为此，只需调用 $apply()方法:

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');
  }
});

我建议您阅读更多有关作用域和摘要周期的内容。 Angular 文档本身是 good start .

最后，我不确定您是否在 Controller 中监听 DOM 事件。如果是，您可能应该使用指令。