我编写了一个捕获键盘事件的指令,并且在某些键上我更新了范围内的一些对象。这个想法是上下移动数组并显示所选行的详细信息。问题是,直到我执行另一个更新页面的操作后,页面才会更新。我怎样才能强迫这个?
这是指令:
LogApp.directive("keyCapture", [function(){
var scopeInit;
return{
link: function(scope, element, attrs, controller){
scopeInit = scope
element.on('keydown', function(e){
scopeInit[attrs.keyCapture].apply(null, [e]);
});
}
}
}]);
像这样绑定模板:
<body ng-controller="logCtrl" key-capture="movePreview">
控制器方法:
$scope.movePreview = function(e){
if ($scope.events.length === 0)
return;
// Find the element
if (e.keyCode === 38 || e.keyCode === 40){
console.log("Pressed %s", e.keyCode);
var offset = 0;
if (e.keyCode === 38 && $scope.previewIndex > 0)
offset = -1;
else if (e.keyCode === 40 && $scope.previewIndex < $scope.events.length -1 )
offset = 1;
$scope.previewIndex += offset;
var eventId = $scope.events[$scope.previewIndex].uuid;
$scope.showEvent(eventId);
e.preventDefault();
}
};
$scope.showEvent(eventId)
将获取具有给定 ID 的项目并将其显示在页面的另一部分。在执行另一个操作(例如单击按钮)之前不会更新的部分。是否可以强制页面更新?
这是一个重现的小提琴:http://jsfiddle.net/gM2KF/1/ http://jsfiddle.net/gM2KF/1/如果单击该按钮,计数器就会更新。如果按任意键,则不会显示任何内容。但是您再次单击该按钮,您会看到计数器已被键盘事件更新,但没有显示。