Angularjs Image Slider按键绑定不起作用并且

Question

我在 angularjs 和 google material 中制作了图像滑块。我的滑块工作正常，但我有两个问题

我无法绑定按键
我的图像在滑动，但两边在一起，几秒后先隐藏起来

一些代码在这里

$scope.onKeyUp = function (keyCode) {
                console.log("I am here;")
                if (keyCode === LEFT_ARROW) {
                    $scope.prevSlide;
                } else if (keyCode === RIGHT_ARROW) {
                    $scope.nextSlide;
                }
            }

完整代码笔是 https://codepen.io/milindsaraswala/pen/yJaYpe

请大神帮忙看看是什么问题。

Answer 1

好的，您需要更改一些内容。

首先，您应该知道 keypress/keydown 仅适用于可以接收焦点的元素（如输入元素）。

一个技巧是在您的元素上指定 tabindex。 AngularJS ng-keydown directive only working for <input> context?

<div class="slider" tabindex="0" ng-keyup="onKeyUp($event)"  flex></div>

其次，您需要使用 keyup 事件而不是 keypress，因为 keypress 似乎已被弃用。

这是更新后的codepen。 https://codepen.io/gaurav5430/pen/xOEXzG/

console.log 现在正在为 keypress 调用（不确定您的逻辑是否有效）

您需要在滑块上单击一次以使其聚焦（或使用键盘聚焦）

Angularjs Image Slider按键绑定不起作用并且

Angujarjs Image Silider keypress bind not working and

css

jquery

angularjs

material-design

angular-material