Angular JS Mall

by zorro

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="test">
    <input type="tel" cardnr ng-model="model" maxlength="9"/>
</div>

JavaScript

angular.module('test', []);
angular.module('test').directive('cardnr', function () {
    'use strict';
    return {
        require: '?ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            if (!ngModelCtrl) {
                return;
            }

            ngModelCtrl.$parsers.push(function handlePastedValues(val) {

                if (val === undefined) {
                    return;
                }

                if (val.length > 9) {
                    val = val.substring(0, 9);
                }

                if (val.charAt(4) !== ' ') {
                    val = val.substring(0, 8);
                }

                if (val.length > 5 && val.charAt(4) !== ' ') {
                    val = val.substr(0, 4) + ' ' + val.substr(4);
                    ngModelCtrl.$setViewValue(val);
                    ngModelCtrl.$render();
                }

                return val;
            });

            ngModelCtrl.$parsers.push(function removeIllegalCharacters(val) {

                if (val === undefined) {
                    return;
                }

                var clean = val.replace(/[^0-9 ]+/g, '');
                if (val !== clean) {
                    ngModelCtrl.$setViewValue(clean);
                    ngModelCtrl.$render();
                }
                return clean;
            });

            ngModelCtrl.$parsers.push(function insertSpaceAfterFourCharacters(val) {
                if (val === undefined) {
                    return;
                }

                if (val.length == 4) {
                    ngModelCtrl.$setViewValue(val + ' ');
                    ngModelCtrl.$render();
                }
                return val;
            });

            element.bind('keydown', function (event) {
                var BACKSPACE = 8,
                    DELETE = 46,
                    SPACE = 32;

                if (event.keyCode === BACKSPACE || event.keyCode === DELETE) {

                  ...