Angular Js , Some Useful Directives

Introduction

In Web development section mostly we required some usefull things as these directive help us a lot

ngEnter

for Enter functionality on page

ngFocusWith

Focus a input field on expression basis

'use strict';


angular.module('myApp').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();
            }
        });
    };
});

 angular.module('myApp').directive('ngFocusWith', function ($timeout) {
    return {
        restrict: 'A',
        scope: {
            focusValue: "=ngFocusWith"
        },
        link: function ($scope, $element, attrs) {
            $scope.$watch("focusValue", function (currentValue, previousValue) {
                if (currentValue === true && !previousValue) {
                    // Manage $digest on watch triggering
                    $timeout(function () {
                        $element[0].focus();
                        $element[0].select();
                    }, 0, false);
                } else if (currentValue === false && previousValue) {
                    // Manage $digest on watch triggering
                    $timeout(function () {
                        $element[0].blur();
                    }, 0, false);
                }
            });
        }
    }
});

These Directive are commany used and not easily available

Points of Interest

Helping contenets in case of angular js

History

a lot of efforts are added to complete this