Question

我正在观看键盘事件，特别是左，右和esc。

每一个都绑定到一个在页面控制器中执行某个范围功能的函数。

按下键时会调用这些函数，但是，应该在这些函数中更新的范围变量似乎没有做任何事情。

是否存在范围问题？我将这些输入事件绑定到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仅在摘要周期运行时更新绑定到范围的内容。大多数情况下，Angular会自动触发摘要以响应某些事件。如果情况并非如此，您需要自己动手。这正是这里发生的事情。

当您使用jqLite / 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。

最后，我不确定您是否正在侦听控制器中的DOM事件。如果你是，你可能应该使用指令。

Answer 2

AngularJS需要知道jQuery事件何时发生，以便它可以触发$ digest周期来更新视图。

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

角度击键观察者没有正确更新范围

2 个答案: