angularJs directives binding keydown events

Question

https://stackoverflow.com/a/15529412/4310103 I took a look at this answer here and saw that with this solution, a user has the ability to bind an handler to an element through a click event...What about if I wanted to bind a handler function to an element and have the function triggered from a keydown event. This is what I was able to muster. But the intended effect does not render. I am trying to get the UI focus on the second input after pressing the down(40) key. What am I doing wrong?:

HTML

<body ng-app = 'angularjs-starter'>
<div ng-controller="MainCtrl">
<div class="element-wrapper" ng-repeat="element in elements">
<div class="first-wrapper">
 <button class="button">{{element.name}}</button>   
  </div>
  <div class="second-wrapper">
    <input type="text" focus-input value="{{element.value}}">   
  </div>
</div>
</div>
</body>    


AngularJs
    var app = angular.module('angularjs-starter', []);
app.js
    app.directive('focusInput', function($timeout) {
      return {
        link: function(scope, element, attrs) {
          element.bind('keydown', function(event) {
            if (event.which == 40)
              $timeout(function() {
                element.parent().parent().find('input')[1].focus();
              });
            });
          }
      };
    });
app.controller('MainCtrl', function($scope) {
  $scope.elements = [ {name: 'n1', value: 1}, {name: 'n2', value: 2}];
});

https://jsfiddle.net/fcjy69ho/3/

I'm happy to say that I solved my own problem. I just set an id on the element and cached all of the elements into an array that I could reference, and then used document.activeElement to determine if I should toggle up or down.

HTML

<body ng-app = 'angularjs-starter'>
<div ng-controller="MainCtrl">
<div class="element-wrapper" ng-repeat="element in elements">
  <div class="first-wrapper">
    <button class="button">{{element.name}}</button>   
  </div>
  <div class="second-wrapper">
    <input id = 'this_input' type="text" value="{{element.value}}" focus-input='this_input' tabIndex="0"> 
  </div>
</div>
</div>
</body>

AngularJS
var app = angular.module('angularjs-starter', []);

app.directive('focusInput', function($timeout) {
return {
link: function(scope, element, attrs) { 
  element.bind('keydown', function(event) {
        var otherElement = document.querySelectorAll('#' + attrs.focusInput);  
        if (event.which == 40 && otherElement[0] === document.activeElement){
             console.log("this kinda works.");
             $timeout(function(){
               otherElement[1].focus();
             }).catch(function(err){
               console.log(err);
             });
         }
      else if (event.which == 38 && otherElement[1] === document.activeElement){
          $timeout(function(){
            console.log('We really got this to work');
            otherElement[0].focus();
          }).catch(function(err){
            console.log(err);
          });
      }
      else 
          console.log('Not the key we are looking for.');
  });
}
}  
});

app.controller('MainCtrl', function($scope) {
$scope.elements = [ {name: 'n1', value: 1}, {name: 'n2', value: 2}];
});

angularJs directives binding keydown events

0 Answers0