angular-paste

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="PasteController">
        <!-- After paste, scope variable specified by ng-model will contain raw pasted text Scope variable specified by ng-array will contain an array of arrays of the tabular data -->
        <angular-paste ng-model="rawPaste" ng-array="parsedPaste" ng-strategy="StrategyA()" />
        <table class="table table-striped table-bordered table-hover">
            <tbody>
                <tr ng-repeat="row in parsedPaste">
                    <td style="width:20px;" ng-repeat="col in row">{{col}}</td>
                </tr>
                <tr ng-show="parsedPaste.length==0">
                    <td>Paste data from Excel/Numbers onto this page using Ctrl + V on Windows or Command + V on Mac</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}

JavaScript

// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.directives'])
    .controller('PasteController', ['$scope', function ($scope) {

    $scope.rawPaste = '';
    $scope.parsedPaste = [];

    var MyStrategy = function () {

        this.pattern = function () {
            return /[\n\f\r]/;
        };

        this.action = function (item, $scope) {

            return item.split("\t");
        }

        this.finish = function (item, $scope) {
            console.log("finish", item);

        }
    };

    $scope.StrategyA = function () {
        return new MyStrategy();
    };

}]);

/* Directives */
angular.module('myApp.directives', [])
    .directive('angularPaste', ['$parse', '$document',

function ($parse, $document) {

    var Strategy = function () {

        this.strategy = {
            pattern: function () {
                return /[\n\f\r]/;
            },
            action: function (item, scope) {
                return item.trim().split("\t");
            }
        };

    };

    Strategy.prototype = {

        setStrategy: function (strategy) {
            this.strategy = strategy;
        },

        pattern: function () {
            return this.strategy.pattern();
        },

        action: function (item, scope) {
            return this.strategy.action(item, scope);
        },

        finish: function (item, scope) {
            return this.strategy.finish(item, scope);
        }
    };

    var config = {
        idPasteBox: '_AngularPasteBox_' + (new Date()).getTime().toString(),
        elementPasteBox: null,
        defaultStrategy: {

            pattern: function () {
                return /[\n\f\r]/;
            },

            action: function (item, scope) {
                return item.trim().split("\t")[0];
            }
        }
    }

    return {
        restrict: 'E',
        link: function (scope, element, attrs) {

            //We do not want to eat up chars if some text...