Eric Saupe
Eric Saupe's Blog

Eric Saupe's Blog

AngularJS Detect Enter Key - ngEnter

Eric Saupe's photo
Eric Saupe
·Mar 14, 2014·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article
AngularJS has a ton of built in directives and functions to make your app come alive very quickly. One thing I noticed it was lacking was a built in on-enter event. For example, if a user is in an input field when they hit enter I want it to do something, maybe not necessarily submit the form. Luckily, AngularJS gives you the ability to create your own directives and add them into your app. Below is a simple directive that you can add to your app that allows you to add ng-enter to elements in your partials. Pass it a function and watch as you hit enter and that function is executed flawlessly.
/
This directive allows us to pass a function in on an enter key to do what we want.
 /
app.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnter);
                });

                event.preventDefault();
            }
        });
    };
});
That's it. Now just add ng-enter="myFunction()" to any element in your partial that detects keystrokes. This has helped me a ton and added a lot of easy functionality to an already great AngularJS system. If you have any other great directives or AngularJS tips please leave them below in the comments.
 
Share this