我有以下代码:
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-up放在li元素或锚元素上,我将指令中的元素作为a.ng-binding.
我不知道这是什么.
我想要的是能够使用我的向上和向下箭头键向上和向下滚动列表(并在滚动时将类应用于突出显示的列表元素).
我期待元素可以是li元素或锚元素,但是我得到了a.ng-binding,它在向上或向下按键时不会触发.
解决方法
请注意,您需要在< li>上设置tabindex属性.使其能够触发keyup事件:
<li tabindex="{{$index}}">
试试这个指令:
app.directive('ngUp',function() { return { scope: { select: "&" },link: function(scope,attrs) { element.on("keyup","[selectable]",function(event) { var $this = $(this); var selectedElement = {}; scope.$apply(function() { if (event.which === 40) { selectedElement = $this.next("[selectable]"); if (selectedElement.length > 0) { scope.select({ element: selectedElement }); } } else if (event.which === 38) { selectedElement = $this.prev("[selectable]"); if (selectedElement.length > 0) { scope.select({ element: $this.prev("[selectable]") }); } } else { } }); if (selectedElement.length > 0) { $this.blur(); selectedElement.focus(); } }); } } });
在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>
DEMO(点击选择一个元素,从那时你可以使用向上和向下箭头选择)
说明:
在我看来,这个指令应该在列表项容器元素上指定(在这种情况下是< ul>),并且任何可选项都必须应用一个可选择的属性.为了使指令可重用,该指令只负责处理keyup事件并选择元素,如何选择元素的实现细节应作为函数传递:
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; };