AngularJS/ionic:通过方向键导航特定的屏幕项目

Question

我正在尝试实现一种机制，其中屏幕上的特定项目可以使用箭头键导航。

目前，我在物品移动时在物品周围画了一个红色框，按回车键激活它们。

我有以下指令： (信用在这里和这里(

.directive("moveNext", function() {
return {
restrict: "A",
link: function($scope, element,attrs) {
element.bind("keyup", function(e) {
if (e.which == 37) {         
console.log ("MOVE LEFT:" + JSON.stringify(element));   
element[0].classList.remove('selected');
var partsId = attrs.id.match(/move-(d+)/);
console.log ("CURRENT PARTS="+JSON.stringify(partsId));
var currentId = parseInt(partsId[1]);
console.log ("Looking for move-"+(currentId-1));
var nextElement = angular.element(document.querySelectorAll('#move-' + (currentId - 1)));
// var $nextElement = element.next().find('movehere');
if(nextElement.length) {
nextElement[0].classList.add('selected');
nextElement[0].focus();
// $nextElement[0].style.border='5px solid red';;
}
}
if (e.which == 39) {         
console.log ("MOVE RIGHT:" + JSON.stringify(element));   
element[0].classList.remove('selected');
var partsId = attrs.id.match(/move-(d+)/);
var currentId = parseInt(partsId[1]);
console.log ("CURRENT PARTS="+JSON.stringify(partsId));
var currentId = parseInt(partsId[1]);

var nextElement = angular.element(document.querySelectorAll('#move-' + (currentId + 1)));

console.log ("Looking for move-"+(currentId+1));
// var $nextElement = element.next().find('movehere');
if(nextElement.length) {
nextElement[0].classList.add('selected');
nextElement[0].focus();
// $nextElement[0].style.border='5px solid red';;
}
}
if (e.which == 13) {                
console.log ("ENTER:" + JSON.stringify(element)); 
//  element.triggerHandler('click');
}
});
if (event) event.preventDefault();
}
}
})         

然后在模板中，我有以下内容，例如：

<div>
<button move-next id="move-1" ng-click="d1()">Yes</button>
<button move-next id="move-3" ng-click="d1()">Yes</button>
<button  ng-click="d1()">No</button>
<button move-next id="move-2" ng-click="d1()">Yes</button>
</div>
<a href="d2()" move-next id="move-4">Yes</a> <!-- PROBLEM -->
<a href="d2()" move-next id="move-5">Yes</a> <!-- NEVER COMES HERE -->

好的部分是我现在可以根据我设置的 ID 顺序导航到任何"可点击"元素，这是我的意图。问题是focus()只适用于可聚焦的项目，所以一旦指令突出显示"move-4"，focus()就不起作用了，所以我永远无法将"下一步"移动到"move-5">

谢谢

Answer 1

问题已解决：

1. 我删除了该指令，而是编写了一个全局键UpHandler
2. 在 keyup 处理程序中，我保留了最后一个选定项目 ID 的状态，因此无论项目是否可聚焦，我都可以 +- 它。

我现在可以使用方向键在任何视图上导航任意项目。

然而，问题是 move-Id 在视图中必须是唯一的，否则我需要找到一种方法来仅在活动视图上进行查询。我需要弄清楚如何做到这一点。currentView = document.querySelector('ion-view[nav-view="active"]');不起作用。

代码(需要清理，但似乎有效(

window.addEventListener('keyup', keyUpHandler, true);
function keyUpHandler(evt){
$timeout (function() {
var currentView = document.querySelector('ion-view[nav-view="active"]');
var keyCode=evt.keyCode;
var el, nextel;
if (keyCode == 13 ) {
if ($rootScope.dpadId >0) {
el = angular.element(currentView.querySelector('#move-' +$rootScope.dpadId));
el.triggerHandler('click'); 
}
return;
}
if (keyCode == 37 || keyCode == 39) {  
if ($rootScope.dpadId < 1) { 
console.log ("First dpad usage");
$rootScope.dpadId = 1; 
el = angular.element(currentView.querySelector('#move-1'));
if (el.length) {
el[0].classList.add('selected');
}
} else {
// unselect old
el = angular.element(currentView.querySelector('#move-' +$rootScope.dpadId));
var nextId = (keyCode == 37) ? $rootScope.dpadId -1: $rootScope.dpadId + 1;
nextel = angular.element(currentView.querySelector('#move-' +nextId));
if (nextel.length) {
el[0].classList.remove('selected');
nextel[0].classList.add('selected');
$rootScope.dpadId = nextId;
}

console.log ("dpadID="+$rootScope.dpadId);
}
}
});
}