角度擊鍵觀察器沒有正確更新範圍

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