angularjs - 使用键盘导航 UI

Question

考虑以下标记 -

<ul id="list">
    <li class="list-item" tabindex="0">test 1</li>
    <li class="list-item" tabindex="1">test 2</li>
    <li class="list-item" tabindex="2">test 3</li>
    <li class="list-item" tabindex="3">test 4</li>
    <li class="list-item" tabindex="4">test 5</li>
    <li class="list-item" tabindex="5">test 6</li>
    <li class="list-item" tabindex="6">test 7</li>
</ul>

和这段 jQuery 代码 -

$(".list-item").bind({
    keydown: function(e) {
        var key = e.keyCode;
        var target = $(e.currentTarget);

        switch(key) {
            case 38: // arrow up
                target.prev().focus();
                break;
            case 40: // arrow down
                target.next().focus();
                break;
        }
    },

    focusin: function(e) {
        $(e.currentTarget).addClass("selected");
    },

    focusout: function(e) {
        $(e.currentTarget).removeClass("selected");
    }
});
$("li").first().focus();

如何以 Angular 移植此代码？到目前为止我有这个-

 <li class="list-item" ng-repeat="item in items" tabindex="{{item.tabIndex}}">
                        {{item.name}}
                    </li>

如何进行 Angular 绑定(bind)？

Answer 1

没有 jQuery 的指令

.directive('arrow', function ($timeout) {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if (event.which === 38) {
              var prevNode = element[0].previousElementSibling;
              var prev = angular.element(prevNode);
              prev[0].focus();
            }
            if (event.which === 40) {
                var target = element.next();
                target[0].focus();
            }
        });
    };
});

html中的用法

<tr arrow>
  <td>test 1</td>                       
</tr>
<tr arrow>
  <td>test 2</td>                       
</tr>