AngularJS/离子型:通过方向键导航特定屏幕项目
AngularJS/离子型:通过方向键导航特定屏幕项目
提问于 2018-05-13 13:09:26
我正在尝试实现一种机制，在这个机制中，屏幕上的特定项目可以使用箭头键导航。
目前，我正在画一个红色的盒子周围的项目，因为他们的移动和按回车激活他们。
.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()只对可聚焦的项目起作用，因此一旦指令突出显示“移动-4”，focus()就不能真正工作，因此我永远不能将“下一步”移动到“移动-5”。
谢谢
回答 1
Stack Overflow用户
发布于 2018-05-13 16:09:14
解决问题：
- 我删除了指令，而是编写了一个全局keyUpHandler。
- 在keyup处理程序中，我将状态保持在上一次选择的项ID上，这样我就可以+-不管某个项是否可聚焦。
我现在可以浏览任意项目在任何视图的方向垫。
然而，问题是移动Ids必须是跨视图的唯一的，或者我需要找到一种方法只对活动视图执行查询。我需要弄清楚该怎么做。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);
}
}
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50316478
复制相关文章
相似问题
腾讯云开发者
