15

I was actually looking to get the content of clipboard using angular JS to simulate a copy paste thing.

Tasneem Hyder
  • 170
  • 1
  • 1
  • 7
  • Highly recommend [angular-zeroclipboard](https://github.com/lisposter/angular-zeroclipboard), it is better documented than `ng-clip`. Also I failed to make `ng-clip` working. – Fedor Sep 16 '14 at 16:08
  • ng-clip depends on ZeroClipboard (at least in some modes of operation), and made it much easier to integrate "Copy to Clipboard" functionality in my case. I followed [these few steps](https://github.com/asafdav/ng-clip#usage) to get it working. – Nikolay Melnikov Nov 15 '14 at 23:19

5 Answers5

8

I created a directive for copy to clipboard which is using the document.execCommand() method.

Directive 

(function() {
app.directive('copyToClipboard',  function ($window) {
        var body = angular.element($window.document.body);
        var textarea = angular.element('<textarea/>');
        textarea.css({
            position: 'fixed',
            opacity: '0'
        });

        function copy(toCopy) {
            textarea.val(toCopy);
            body.append(textarea);
            textarea[0].select();

            try {
                var successful = document.execCommand('copy');
                if (!successful) throw successful;
            } catch (err) {
                console.log("failed to copy", toCopy);
            }
            textarea.remove();
        }

        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                element.bind('click', function (e) {
                    copy(attrs.copyToClipboard);
                });
            }
        }
    })
}).call(this);

Html

<button  copy-to-clipboard="Copy Me!!!!" class="button">COPY</button>
fyasir
  • 2,924
  • 2
  • 23
  • 36
  • How might one copy something other than "Copy Me!!!!" - such as , say, the contents of a textarea? – DaveC426913 Sep 02 '16 at 15:30
  • In Controller, use a scope variable $scope.copyMe = ''; and use this var in the textarea value as following. – fyasir Sep 02 '16 at 15:39
  • When I use this code, textarea.val(toCopy) doesn't append anything into the textarea (my toCopy is text html). When I append it to the body, it actually appends [object Object]. Not sure what's up with that. – Dev Null Oct 14 '16 at 04:08
  • @MohammedSafwan Can you please share your code and also are you using Angular 1.5? – fyasir May 04 '18 at 11:43
  • @nutboltu I am using `AngularJS v1.2.20`. Is there any version constraint for using this code snippet? – Safwan May 04 '18 at 16:08
  • @MohammedSafwan not really. can you please share your piece of code? – fyasir May 05 '18 at 01:17
  • Just make it – Ali Hasan Nov 09 '18 at 12:41
4

here's a concise version I use -

function copyToClipboard(data) {
    angular.element('<textarea/>')
        .css({ 'opacity' : '0', 'position' : 'fixed' })
        .text(data)
        .appendTo(angular.element($window.document.body))
        .select()
        .each(function() { document.execCommand('copy') })
        .remove();
}
0cd
  • 1,729
  • 3
  • 15
  • 24
2

BTW, if using Angular to copy to clipboard with a Chrome Packaged App, do the following:

  1. Add "clipboardRead" and "clipboardWrite" to the "permissions" in the manifest.json.
  2. use ng-click in your view to feed the value to the controller $scope, like: data-ng-click="copyUrlToClipboard(file.webContentLink)"

  3. Put a function in your controller like:

    $scope.copyUrlToClipboard =  function(url) {
    var copyFrom = document.createElement("textarea");
    copyFrom.textContent = url;
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(copyFrom);
    copyFrom.select();
    document.execCommand('copy');
    body.removeChild(copyFrom);
    this.flashMessage('over5');
}
Yves
  • 129
  • 1
  • 7
0

I had the same issue and I used angular-clipboard feature[1] which uses new Selection API and Clipboard API available in the latest browsers.

First we have to install angular-clipboard lib, i'm using bower.

$ bower install angular-clipboard --save

To import the module use following in html. 

<script src="../../bower_components/angular-clipboard/angular-clipboard.js"></script>

To set values to element using $scope in controller

$scope.textToCopy = 'Testing clip board';

Load the clipboard module using,

angular.module('testmodule', ['angular-clipboard']);

This works for Chrome 43+, Firefox 41+, Opera 29+ and IE10+.

Its simple & worked fine.

[1] https://www.npmjs.com/package/angular-clipboard

Thanks,

Kandy
  • 1,067
  • 12
  • 29
0

A completely different approach:

I need to copy & paste text between windows, so I used this to save (copy) the data to local storage. Then, in the other window, I load it out of local storage, using the same key, and I can then 'paste' is as I like.

Sean
  • 14,359
  • 13
  • 74
  • 124