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

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会自动触发摘要来响应某些事件。当情况并非如此，你需要自己去做。这正是这里发生的事情。

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

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

Answer 2

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

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