zzEnter

Hi,

Today, I’ll share my first tip for AngularJs. This is something very simple but this can be usefull.

zzEnter

zzEnter is a directive that allows you to call a function when using “Enter” key on your keyboard when typing an input.

Code

angular.module('zzEnter', [])
.directive('zzEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.zzEnter);
                });
                event.preventDefault();
            }
        });
    };
})

How to

• Declare the module in your html

<script src="js/zzEnter.js"></script>

• Add the module in your application

angular.module('myApp', ['zzEnter'])
// ...

• use it like so :

  • in the controller

    .controller('myController', ['$scope', function($scope) {
        $scope.foo = "bar";
        $scope.sayHello = function() {
            alert('Hello, ' + ($scope.foo || 'World') + '!');
        }
    });

  • in the view

      <input ng-model="foo" zz-enter="sayHello()">

So, now when you use “Enter” key on this input, you should be alerted with “Hello, [what you entered in the input]!” .

Did you like it ? Did you find it usefull? let me know in the comments …