我正在尝试仅使用键盘浏览记录列表。当页面加载时，默认的“焦点”应该在第一条记录上，当用户点击键盘上的向下箭头时，需要关注下一条记录。当用户单击向上箭头时，应聚焦前一条记录。当用户单击 Enter 按钮时，它应该将他们带到该记录的详细信息页面。
AngularJS 在 1.1.5（不稳定）中似乎支持这一点，我们不能在生产中使用它。我目前使用的是 1.0.7。我希望做这样的事情 - 应该在文档级别处理密钥。当用户按下某个键时，代码应在允许的键数组中查找。如果找到匹配项（例如向下键代码），它应该将焦点（应用 .highlight css）移动到下一个元素。当按下 enter 时，它应该获取 .highlight css 的记录并获取记录 id 以供进一步处理。
谢谢！
这是您可以选择执行的示例： http ://plnkr.co/edit/XRGPYCk6auOxmylMe0Uu?p=preview
<body key-trap>
<div ng-controller="testCtrl">
<li ng-repeat="record in records">
<div class="record"
ng-class="{'record-highlight': record.navIndex == focu sIndex}">
{{ record.name }}
</div>
</li>
</div>
</body>
这是我能想到的最简单的方法。它将指令绑定keyTrap到将事件和
消息body捕获到子范围的指令。元素持有者范围将捕获消息并简单地增加或减少 focusIndex 或在点击时触发一个函数。keydown$broadcastopenenter
http://plnkr.co/edit/rwUDTtkQkaQ0dkIFflcy?p=preview
现在支持有序/过滤列表。
事件处理部分没有改变，但现在使用$index过滤列表缓存技术来跟踪哪个项目得到关注。
迄今为止提供的所有解决方案都有一个共同问题。这些指令不可重用，它们需要了解在控制器提供的父 $scope 中创建的变量。这意味着如果你想在不同的视图中使用相同的指令，你需要重新实现你在前一个控制器中所做的一切，并确保你对事物使用相同的变量名，因为指令基本上具有硬编码的 $scope 变量名在他们中。你绝对不能在同一个父范围内使用同一个指令两次。
解决此问题的方法是在指令中使用隔离范围。通过这样做，您可以通过通用参数化父范围所需的项目来使指令可重用，而不管父 $scope 是什么。
在我的解决方案中，控制器唯一需要做的就是提供一个 selectedIndex 变量，该指令用于跟踪当前选择了表中的哪一行。我本可以将此变量的责任与指令隔离开来，但通过让控制器提供变量，它允许您在指令之外操作表中当前选定的行。例如，您可以在控制器中实现“单击选择行”，同时仍使用箭头键在指令中导航。
指令：
angular
.module('myApp')
.directive('cdArrowTable', cdArrowTable);
.directive('cdArrowRow', cdArrowRow);
function cdArrowTable() {
return {
restrict:'A',
scope: {
collection: '=cdArrowTable',
selectedIndex: '=selectedIndex',
onEnter: '&onEnter'
},
link: function(scope, element, attrs, ctrl) {
// Ensure the selectedIndex doesn't fall outside the collection
scope.$watch('collection.length', function(newValue, oldValue) {
if (scope.selectedIndex > newValue - 1) {
scope.selectedIndex = newValue - 1;
} else if (oldValue <= 0) {
scope.selectedIndex = 0;
}
});
element.bind('keydown', function(e) {
if (e.keyCode == 38) { // Up Arrow
if (scope.selectedIndex == 0) {
return;
}
scope.selectedIndex--;
e.preventDefault();
} else if (e.keyCode == 40) { // Down Arrow
if (scope.selectedIndex == scope.collection.length - 1) {
return;
}
scope.selectedIndex++;
e.preventDefault();
} else if (e.keyCode == 13) { // Enter
if (scope.selectedIndex >= 0) {
scope.collection[scope.selectedIndex].wasHit = true;
scope.onEnter({row: scope.collection[scope.selectedIndex]});
}
e.preventDefault();
}
scope.$apply();
});
}
};
}
function cdArrowRow($timeout) {
return {
restrict: 'A',
scope: {
row: '=cdArrowRow',
selectedIndex: '=selectedIndex',
rowIndex: '=rowIndex',
selectedClass: '=selectedClass',
enterClass: '=enterClass',
enterDuration: '=enterDuration' // milliseconds
},
link: function(scope, element, attrs, ctr) {
// Apply provided CSS class to row for provided duration
scope.$watch('row.wasHit', function(newValue) {
if (newValue === true) {
element.addClass(scope.enterClass);
$timeout(function() { scope.row.wasHit = false;}, scope.enterDuration);
} else {
element.removeClass(scope.enterClass);
}
});
// Apply/remove provided CSS class to the row if it is the selected row.
scope.$watch('selectedIndex', function(newValue, oldValue) {
if (newValue === scope.rowIndex) {
element.addClass(scope.selectedClass);
} else if (oldValue === scope.rowIndex) {
element.removeClass(scope.selectedClass);
}
});
// Handles applying/removing selected CSS class when the collection data is filtered.
scope.$watch('rowIndex', function(newValue, oldValue) {
if (newValue === scope.selectedIndex) {
element.addClass(scope.selectedClass);
} else if (oldValue === scope.selectedIndex) {
element.removeClass(scope.selectedClass);
}
});
}
}
}
该指令不仅允许您使用箭头键导航表格，还允许您将回调方法绑定到 Enter 键。因此，当按下回车键时，当前选择的行将作为参数包含在使用指令 (onEnter) 注册的回调方法中。
作为一个额外的好处，您还可以将 CSS 类和持续时间传递给 cdArrowRow 指令，这样当在选定行上按下回车键时，传入的 CSS 类将应用于行元素，然后在传递后删除持续时间（以毫秒为单位）。这基本上允许您执行一些操作，例如在按下回车键时使行闪烁不同的颜色。
查看用法：
<table cd-arrow-table="displayedCollection"
selected-index="selectedIndex"
on-enter="addToDB(row)">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection"
cd-arrow-row="row"
selected-index="selectedIndex"
row-index="$index"
selected-class="'mySelcetedClass'"
enter-class="'myEnterClass'"
enter-duration="150"
>
<td>{{row.firstName}}</td>
<td>{{row.lastName}}</td>
</tr>
</tbody>
</table>
控制器：
angular
.module('myApp')
.controller('MyController', myController);
function myController($scope) {
$scope.selectedIndex = 0;
$scope.displayedCollection = [
{firstName:"John", lastName: "Smith"},
{firstName:"Jane", lastName: "Doe"}
];
$scope.addToDB;
function addToDB(item) {
// Do stuff with the row data
}
}
这是我曾经为类似问题构建的以下指令。该指令侦听键盘事件并更改行选择。
此链接对如何构建它有完整的解释。使用箭头更改行选择。
这是指令
foodApp.directive('arrowSelector',['$document',function($document){
return{
restrict:'A',
link:function(scope,elem,attrs,ctrl){
var elemFocus = false;
elem.on('mouseenter',function(){
elemFocus = true;
});
elem.on('mouseleave',function(){
elemFocus = false;
});
$document.bind('keydown',function(e){
if(elemFocus){
if(e.keyCode == 38){
console.log(scope.selectedRow);
if(scope.selectedRow == 0){
return;
}
scope.selectedRow--;
scope.$apply();
e.preventDefault();
}
if(e.keyCode == 40){
if(scope.selectedRow == scope.foodItems.length - 1){
return;
}
scope.selectedRow++;
scope.$apply();
e.preventDefault();
}
}
});
}
};
}]);
<table class="table table-bordered" arrow-selector>....</table>
还有你的中继器
<tr ng-repeat="item in foodItems" ng-class="{'selected':$index == selectedRow}">
我有类似的要求来支持使用箭头键的 UI 导航。我最终想到的是keydown封装在 AngularJS 指令中的 DOM 事件处理程序：
HTML：
<ul ng-controller="MainCtrl">
<li ng-repeat="record in records">
<div focusable tag="record" on-key="onKeyPressed" class="record">
{{ record.name }}
</div>
</li>
</ul>
CSS：
.record {
color: #000;
background-color: #fff;
}
.record:focus {
color: #fff;
background-color: #000;
outline: none;
}
JS：
module.directive('focusable', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.attr('tabindex', '-1'); // make it focusable
var tag = attrs.tag ? scope.$eval(attrs.tag) : undefined; // get payload if defined
var onKeyHandler = attrs.onKey ? scope.$eval(attrs.onKey) : undefined;
element.bind('keydown', function (event) {
var target = event.target;
var key = event.which;
if (isArrowKey(key)) {
var nextFocused = getNextElement(key); // determine next element that should get focused
if (nextFocused) {
nextFocused.focus();
event.preventDefault();
event.stopPropagation();
}
}
else if (onKeyHandler) {
var keyHandled = scope.$apply(function () {
return onKeyHandler.call(target, key, tag);
});
if (keyHandled) {
event.preventDefault();
event.stopPropagation();
}
}
});
}
};
});
function MainCtrl ($scope, $element) {
$scope.onKeyPressed = function (key, record) {
if (isSelectionKey(key)) {
process(record);
return true;
}
return false;
};
$element.children[0].focus(); // focus first record
}
您可以创建一个表格导航服务来跟踪当前行并公开导航方法以修改当前行的值并将焦点设置到该行。
然后，您需要做的就是创建一个键绑定指令，您可以在其中跟踪按键事件并在按键向上或按键向下时从表导航服务触发公开的方法。
我使用控制器通过一个名为“keyDefinitions”的配置对象将服务方法链接到键绑定指令。
您可以扩展 keyDefinitions 以包含Enter键（代码：13）并通过服务属性“tableNavigationService.currentRow”或“$scope.data”连接到选定的 $index 值，然后将其作为参数传递给您自己的自定义提交（）函数。
我希望这对某人有帮助。
我已在以下 plunker 位置发布了对此问题的解决方案：
HTML：
<div key-watch>
<table st-table="rowCollection" id="tableId" class="table table-striped">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance" st-skip-natural="true">balance</th>
<th>email</th>
</tr>
</thead>
<tbody>
<!-- ADD CONDITIONAL STYLING WITH ng-class TO ASSIGN THE selected CLASS TO THE ACTIVE ROW -->
<tr ng-repeat="row in rowCollection track by $index" tabindex="{{$index + 1}}" ng-class="{'selected': activeRowIn($index)}">
<td>{{row.firstName | uppercase}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate | date}}</td>
<td>{{row.balance | currency}}</td>
<td>
<a ng-href="mailto:{{row.email}}">email</a>
</td>
</tr>
</tbody>
</table>
</div>
控制器：
app.controller('navigationDemoController', [
'$scope',
'tableNavigationService',
navigationDemoController
]);
function navigationDemoController($scope, tableNavigationService) {
$scope.data = tableNavigationService.currentRow;
$scope.keyDefinitions = {
'UP': navigateUp,
'DOWN': navigateDown
}
$scope.rowCollection = [
{
firstName: 'Chris',
lastName: 'Oliver',
birthDate: '1980-01-01',
balance: 100,
email: 'chris@email.com'
},
{
firstName: 'John',
lastName: 'Smith',
birthDate: '1976-05-25',
balance: 100,
email: 'chris@email.com'
},
{
firstName: 'Eric',
lastName: 'Beatson',
birthDate: '1990-06-11',
balance: 100,
email: 'chris@email.com'
},
{
firstName: 'Mike',
lastName: 'Davids',
birthDate: '1968-12-14',
balance: 100,
email: 'chris@email.com'
}
];
$scope.activeRowIn = function(index) {
return index === tableNavigationService.currentRow;
};
function navigateUp() {
tableNavigationService.navigateUp();
};
function navigateDown() {
tableNavigationService.navigateDown();
};
function init() {
tableNavigationService.setRow(0);
};
init();
};
})();
服务和指令：
(function () {
'use strict';
var app = angular.module('tableNavigation', []);
app.service('tableNavigationService', [
'$document',
tableNavigationService
]);
app.directive('keyWatch', [
'$document',
keyWatch
]);
// TABLE NAVIGATION SERVICE FOR NAVIGATING UP AND DOWN THE TABLE
function tableNavigationService($document) {
var service = {};
// Your current selected row
service.currentRow = 0;
service.table = 'tableId';
service.tableRows = $document[0].getElementById(service.table).getElementsByTagName('tbody')[0].getElementsByTagName('tr');
// Exposed method for navigating up
service.navigateUp = function () {
if (service.currentRow) {
var index = service.currentRow - 1;
service.setRow(index);
}
};
// Exposed method for navigating down
service.navigateDown = function () {
var index = service.currentRow + 1;
if (index === service.tableRows.length) return;
service.setRow(index);
};
// Expose a method for altering the current row and focus on demand
service.setRow = function (i) {
service.currentRow = i;
scrollRow(i);
}
// Set focus to the active table row if it exists
function scrollRow(index) {
if (service.tableRows[index]) {
service.tableRows[index].focus();
}
};
return service;
};
// KEY WATCH DIRECTIVE TO MONITOR KEY DOWN EVENTS
function keyWatch($document) {
return {
restrict: 'A',
link: function(scope) {
$document.unbind('keydown').bind('keydown', function(event) {
var keyDefinitions = scope.keyDefinitions;
var key = '';
var keys = {
UP: 38,
DOWN: 40,
};
if (event && keyDefinitions) {
for (var k in keys) {
if (keys.hasOwnProperty(k) && keys[k] === event.keyCode) {
key = k;
}
}
if (!key) return;
var navigationFunction = keyDefinitions[key];
if (!navigationFunction) {
console.log('Undefined key: ' + key);
return;
}
event.preventDefault();
scope.$apply(navigationFunction());
return;
}
return;
});
}
}
}
})();