使用Angular.js构建keyboad可导航列表视图

Question

我正在使用angular.js开发listview。使用键盘向上/向下箭头键可以“导航”列表视图。列表视图看起来很棒，但我的问题是如何在列表中导航时将焦点设置在正确的元素上。例如，按下向上箭头键后如何将最后一个元素聚焦在新页面上，或者在按下向下箭头键后如何将第一个元素聚焦在新页面上。

这是我的标记

<div ng-controller="MainController as list" ng-init="start=0; end=5" >
<a prev-page="list.decrease()" next-page="list.increase()" href="#" class="list-group-item animate-repeat" ng-repeat="item in list.items | slice: start + list.next : end + list.next" tabindex="{{$index}}" navigatable-with-keyboard>
    {{item.title}}
            {{start + list.next}}
    <span class="glyphicon glyphicon-chevron-right to-right-side"></span>
</a>

这里是angular.js代码

(function(){
var test = [];
for (var i = 1; i <= 100; i++)
    test.push({id: i, title: 'Item ' + i});

var myapp = angular.module('testTV', ['ngAnimate']);

myapp.filter('slice', function() {    
    return function(arr, start, end) {
        return arr.slice(start, end);
    };
});

myapp.controller('MainController', [function(){
    var list = this;
    list.items = test;
    list.next = 0;

    list.decrease = function(){
        //console.log(this.next);
        this.next -= 5;
    }
    list.increase = function(){
        //console.log(this.next);
        this.next += 5;
    }
    list.refresh = function(){
        list.items = [];
        for (var z = 101; z <= 111; z++)
            list.items.push({id: z, title: 'Item ' + z});
    }
}]);    
myapp.directive('navigatableWithKeyboard', function(){
       return {
           scope: {
               nextPage: '&',
               prevPage: '&',
           },
           link: function(scope, element, attribute){
               scope.$watch(attribute.tabindex, function() {
                   if(attribute.tabindex == 0)
                       element.focus();
               });
                element.on("keydown", function(event){
                    scope.$apply(function() {
                        switch (event.keyCode) {
                            case tvKey.KEY_DOWN:
                                element.next("a").focus();
                                if(scope.$parent.$last) scope.nextPage();
                                break;
                            case tvKey.KEY_UP:
                                element.prev("a").focus();
                                if(scope.$parent.$first) scope.prevPage();
                                break;
                            case tvKey.KEY_LEFT:
                                scope.prevPage();
                                break;
                            case tvKey.KEY_RIGHT:
                                scope.nextPage();
                                break;
                            default:
                                break;
                        }
                    });                    
                }) ;
            }
        };
    });
})();

var tvKey = {
    KEY_POWER: 2085,
    KEY_MUTE: 2192,
    KEY_MIC: 2032,
    KEY_NUM1: 49,
    KEY_NUM2: 50,
    KEY_NUM3: 51,
    KEY_NUM4: 52,
    KEY_NUM5: 53,
    KEY_NUM6: 54,
    KEY_NUM7: 55,
    KEY_NUM8: 56,
    KEY_NUM9: 57,
    KEY_NUM0: 48,
    KEY_MENU: 122,
    KEY_BACK: 8,
    KEY_RETURN: 8,
    KEY_CHANNEL_PREV: 1009,
    KEY_CHANNEL_NEXT: 9,
    KEY_EXIT: 27,
    KEY_REFRESH: 116,
    KEY_UP: 38,
    KEY_DOWN: 40,
    KEY_LEFT: 37,
    KEY_RIGHT: 39,
    KEY_ENTER: 13,
    KEY_RW: 33,
    KEY_PAGE_UP: 33,
    KEY_FF: 34,
    KEY_PAGE_DOWN: 34,
    KEY_VOLUME_UP: 107,
    KEY_VOLUME_DOWN: 109,
    KEY_F1: 112,
    KEY_F2: 113,
    KEY_F3: 114,
    KEY_F4: 115,
    KEY_SET: 120,
    KEY_TV: 121,
    KEY_PHONE: 119,
    KEY_WEB: 123,
    KEY_REWIND: 2066,
    KEY_FORWARD: 2070,
    KEY_PLAY_PAUSE: 2082,
    KEY_STOP: 2083,
    KEY_RECORD: 2087,
    KEY_INFO: 2089,
    KEY_FRAME: 117,
    KEY_APP: 2076,
    KEY_USB_UNMOUNTED: 2081,
    KEY_USB_MOUNTED: 2080,
    KEY_DELETE: 46,
    KEY_YELLOW: 68,
    KEY_BLUE: 67,
    KEY_GREEN: 66,
    KEY_RED: 65
};

以下是jsfiddle.net

的链接