Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple copy to clipboard functionality in angular without any dependencies
<!-- View it live here: http://codepen.io/anon/pen/waZOjB -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/JustMaier/6ef7788709d675bd8230/raw/3d39d50e66d8d77e05656ed7dd09298be7e86f1f/ngClickCopy.js"></script>
<script>
angular.module('app', ['ngClickCopy'])
</script>
<div ng-app="app">
<button ng-click-copy="Hello World">Copy</button>
</div>
'use strict';
angular.module('ngClickCopy', [])
.service('ngCopy', ['$window', function ($window) {
var body = angular.element($window.document.body);
var textarea = angular.element('<textarea/>');
textarea.css({
position: 'fixed',
opacity: '0'
});
return function (toCopy) {
textarea.val(toCopy);
body.append(textarea);
textarea[0].select();
try {
var successful = document.execCommand('copy');
if (!successful) throw successful;
} catch (err) {
window.prompt("Copy to clipboard: Ctrl+C, Enter", toCopy);
}
textarea.remove();
}
}])
.directive('ngClickCopy', ['ngCopy', function (ngCopy) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function (e) {
ngCopy(attrs.ngClickCopy);
});
}
}
}])
@JustMaier

This comment has been minimized.

Copy link
Owner Author

JustMaier commented Aug 14, 2015

Tested in IE 11, Edge, and Chrome 44. Pretty sure this will only work in modern browsers...
Demo

@olozzalap

This comment has been minimized.

Copy link

olozzalap commented Feb 22, 2017

Thanks for this, very useful!

@moussa-b

This comment has been minimized.

Copy link

moussa-b commented May 22, 2017

Thanx a lot for this @JustMaier it works like a charm!

@yuvalov-bezeq

This comment has been minimized.

Copy link

yuvalov-bezeq commented Jun 1, 2017

Thank you very much for this 👍

@yourNameIsGood

This comment has been minimized.

Copy link

yourNameIsGood commented Jun 8, 2017

What if I need to generate a new value of something while I click it and then I want to copy this new value to the clipboard without any move :
new_and_cp

But what's above doesn't seem to work every time.
Sometimes needs to click twice to get the copy of that value.

Any suggestion?

@sainathpabba-thrymr

This comment has been minimized.

Copy link

sainathpabba-thrymr commented Jun 17, 2017

Thank You...

@atanas3angelov

This comment has been minimized.

Copy link

atanas3angelov commented Aug 7, 2017

Thank you, JustMaier. :)

@bmomani1

This comment has been minimized.

Copy link

bmomani1 commented Oct 2, 2017

@TLBSoftware

This comment has been minimized.

Copy link

TLBSoftware commented Mar 12, 2018

@yourNameIsGood

To dynamically copy values you can use this directive as such

<h1 ng-click-copy="{{controllerAsName.property}}"> {{controllerAsName.property}}</h1>

so if you had your controller as say itemCtrl and you had a property name sku with a value of 987686755 then it would display the value inside the tag and when click would copy that value as well

@ulrichdohou

This comment has been minimized.

Copy link

ulrichdohou commented Apr 5, 2018

Thats you. It works perfectly for my case

@kennymuse

This comment has been minimized.

Copy link

kennymuse commented Jun 14, 2018

With iOS device, there is a quick flick probably for the show/hide of the keyboard (probably for the focus) and don't copy the text.

@Zeioth

This comment has been minimized.

Copy link

Zeioth commented Jul 10, 2018

Simple and elegant, thanks!

@shashidhar7

This comment has been minimized.

Copy link

shashidhar7 commented Jun 25, 2019

Thankyou. It works perfectly working

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.