Arnaldo Capo

ngEnter with Multiple Key Codes

I’m back!

Let’s say, you want to do something when the user hits ‘enter’ in an HTML Input Text Box. There are many ngEnter directives out there and what they are usually missing is when the user hits ‘escape’.  If you extend UX, it seems natural for the user to hit ‘ESC’ in order to cancel or quit what they are currently doing.

I’ve created a very simple directive that you can add key codes and functions. I should probably rename the directive but I figured that some people would actually find this useful starting from the typical ngEnter rabbit hole.

HTML

Directive

.directive('ngEnter', [function () {
  return function ($scope, element, attrs) {
    element.bind('keyup', function (event) {

      var evalResult = $scope.$eval(attrs.ngEnter);

      for (var key in evalResult) {

        var parsedKey = parseInt(key);

        if ( isNaN(parsedKey) )
          continue;

        if(event.which === parsedKey) {

          $scope.$apply(function (){
            $scope.$eval(evalResult[key]);
          });

          event.preventDefault();

          break;
        }

      }

    });
  };
}])