作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有以下代码:
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 元素元素或 anchor 元素上,我在指令中得到的元素为 a.ng-binding。
我不知道这是什么。
我想要的是能够使用向上和向下箭头键上下滚动列表(并在滚动时将类应用于突出显示的列表元素)。
我期望该元素是 li 元素或 anchor 元素,但我得到 a.ng-binding ,它不会在按下向上或向下键时触发。
最佳答案
请注意,您需要设置 tabindex
属性 <li>
使其能够触发keyup
事件:
<li tabindex="{{$index}}">
尝试这个指令:
app.directive('ngUp', function() {
return {
scope: {
select: "&"
},
link: function(scope, element, 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>
),并且任何可选项目都必须应用属性 selectable
。为了使该指令可重用,该指令仅负责处理 keyup
事件并选择元素,如何选择元素的实现细节应作为函数传递:
scope: {
select: "&"
}
每当我需要选择一个元素时,我都会调用这个绑定(bind)函数:
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;
};
关于angularjs - 如何让键向上/向下指令在 Angularjs 中的列表上工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23306314/
我是一名优秀的程序员,十分优秀!