input enter

onKeyEnter.js

/**
 * @ngDoc Directive
 * @name app.Directive.onKeyEnter
 * @module app
 *
 * @description 
 * this directive triggers callback function when enter key is pressed
 * 
 * @author Mohan Singh <mslogicmaster@gmail.com>
 * 
 */
 angular
    .module('app', []);
    
angular
    .module('app')
    .directive('onKeyEnter', ['$parse', function($parse) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('keydown keypress', function(event) {
                    if (event.which === 13) {
                        var attrValue = $parse(attrs.onKeyEnter);
                        (typeof attrValue === 'function') ? attrValue(scope) : angular.noop();
                        event.preventDefault();
                    }
                });
                scope.$on('$destroy', function() {
                    element.unbind('keydown keypress')
                })
            }
        };
    }]);

Example:

 <input type="text" on-key-enter="saveStep()" />

hello , i'm new in angular and i have two questions
1.- why do you pass the scope on line 24?
2.- what do you do on line 28?

Hello dzepp91

I am not sure why he is passing scope on line 24. It doesn't seem to work without it.
Perhaps somebody else can explain.

As for line 28, when the input box is removed from page (i.e. navigating to a different partial) the events need to be unbind. If you don't do this, it can leave the binding in memory, but the box itself will not exist. (causing a memory leak)
If this continued to occur multiple times, then the memory could fill up and the browser would crash.

You can check here for more information: https://docs.angularjs.org/guide/directive
look in the heading "Creating a Directive that Manipulates the DOM"

Best Practice: Directives should clean up after themselves. You can use element.on('$destroy', ...) or scope.$on('$destroy', ...) to run a clean-up function when the directive is removed.

I hope this helps.

Bindings doesn't refresh when a value is change inside the function invoke by keypress. Do you need to invoke digest after calling the function?

@morenodoug

1.- why do you pass the scope on line 24?

$parse(attrs.onKeyEnter) Converts AngularJS expression into a function. onKeyEnter is an Angular Expression here.
$parse(attrs.onKeyEnter) returns a function(context, locals) where context is scope.

More Info: https://docs.angularjs.org/api/ng/service/$parse

2.- what do you do on line 28?

It is a best practice to unbind events from the element when it is not used. scope.$on('$destroy', function() { is an event when a directive is destroyed in that case, all attached events should be detached.

@zorlac
Binding does work perfectly. if (event.which === 13) { does trigger angular Expression when ENTER key is pressed.