Angujarjs Image Silider keypress bind not working and

Question

I have make image slider in angularjs with google material. My slider is working but I have two issue

I could not bind keypress
My images are sliding but both side together and then first hide after few seconds

Some code is over here

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

and full codepen is https://codepen.io/milindsaraswala/pen/yJaYpe

Kindly somebody help, what can be the issue.

firstly, it should be $event.keyCode. secondly, i am getting a lot of other errors in your pen — gaurav5430, Jun 19 '16 at 15:41
also, where have you put ng-keyup , so that your onkeyup function gets called ? — gaurav5430, Jun 19 '16 at 15:45
@gaurav5430 I removed all the error and keyUp is ng-keypress is on line number 40 in HTML — Milind, Jun 19 '16 at 15:53

score 1 · Accepted Answer · edited May 23 '17 at 10:33

Ok, there are a few things that you would need to change.

First, you ought to know that keypress/keydown would only work on elements which can receive focus (like input elements).

A hack to do that is to specify tabindex on your element. AngularJS ng-keydown directive only working for <input> context?

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

Secondly, you need to use keyup event instead of keypress, as it seems that keypress is deprecated.

This is the updated codepen. https://codepen.io/gaurav5430/pen/xOEXzG/

console.log is being called for keypress now (not sure if your logic is working or not)

You will need to click once on the slider to focus it (or use keyboard to focus)

Angujarjs Image Silider keypress bind not working and

1 Answers1