如何让key up/down指令在Angularjs中的列表上工作？

我有以下代码：

app.directive('ngUp', function () {
    return function (scope, element, attrs) {
        element.bind("keyup", function (event) {
            if(event.which === 40) {
                  console.log('down')
                }
            else if (event.which === 38) {
                  console.log('up');
                }
            else {
                console.log('some other');
            }

        });
    };
});

我有：

<div  class="scrollbar" id="ex3">
<div>
    <ul>
        <li ng-repeat="video in videos">
            <a href="#" ng-click="select($index)" style="font-size: 100%">
                {{video.name | subStringFilter : 20}}
            </a>
        </li>
    </ul>
</div>

如果我把ng放在li元素或锚元素上，我在指令中得到的元素是a.ng-binding

我不知道这是什么

我想要的是能够使用上下箭头键上下滚动列表（并在滚动时将类应用于高亮显示的列表元素）

---

我原以为元素是li元素或锚元素，但我得到了a.ng-binding，它在向上或向下按键时不会触发。

请注意，您需要在

上设置

tabindex

属性，使其能够触发

keyup

事件：

<li tabindex="{{$index}}">

在html中使用它：

<ul ng-up select="select(element)">
      <li selectable ng-repeat="video in videos" tabindex="{{$index}}" ng-click="select($event.target)" ng-class="{selected:video.selected}">
        <a href="#" style="font-size: 100%">
                {{video.name }}
            </a>
      </li>
  </ul>

每当我需要选择一个元素时，我调用这个绑定函数：

scope: {
    select: "&"
}

scope.select({
                    element: $this.prev("[selectable]")
          });

在本例中，我假设将元素设置为选中的逻辑如下：

$scope.select = function(element) {
    angular.forEach($scope.videos, function(value) {
      value.selected = false;
    });

    angular.element(element).scope().video.selected = true;
};

---

谢谢Khanh，这是一个绝妙的解决方案。我是angularjs的新手，非常感谢你的帮助。我在某个地方读到，我们应该避免使用JQuery，您提供的解决方案是否可能？@JD。Angular指令用于包装第三个组件（jQuery、引导等等）。我不认为我们不能在这里使用jQuery。谢谢Khanh，谢谢你的帮助和指导。我不同意angular指令是为了包装第三方组件而设计的，尽管这是一种选择。这也完全可以在没有jquery的情况下解决。@Ryan M:使用tabindex=“-1”也是一种解决方案。这取决于您需要什么：。这只是一个例子。

$scope.select = function(element) {
    angular.forEach($scope.videos, function(value) {
      value.selected = false;
    });

    angular.element(element).scope().video.selected = true;
};