AngularJS copy to clipboard

Question

Is there a way to make a copy button with a copy function that will copy all the contents of a modal and you can paste it to notepad

Answer 1

I needed this functionality in my Controller, as the text to be copied is dynamic, here's my simple function based on the code in the ngClipboard module:

function share() {
    var text_to_share = "hello world";

    // create temp element
    var copyElement = document.createElement("span");
    copyElement.appendChild(document.createTextNode(text_to_share));
    copyElement.id = 'tempCopyToClipboard';
    angular.element(document.body.append(copyElement));

    // select the text
    var range = document.createRange();
    range.selectNode(copyElement);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);

    // copy & cleanup
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
    copyElement.remove();
}

P.S.
You're welcome to add a comment now telling me how bad it is to manipulate DOM from a Controller.

Answer 2

If you have jquery support use this directive

.directive('copyToClipboard', function () {
        return {
            restrict: 'A',
            link: function (scope, elem, attrs) {
                elem.click(function () {
                    if (attrs.copyToClipboard) {
                        var $temp_input = $("<input>");
                        $("body").append($temp_input);
                        $temp_input.val(attrs.copyToClipboard).select();
                        document.execCommand("copy");
                        $temp_input.remove();
                    }
                });
            }
        };
    });

Html

<a href="" copy-to-clipboard="Text to copy">Copy text</a>