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.