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 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 olozzalap commented Feb 22, 2017

Thanks for this, very useful!

@moussa-b

This comment has been minimized.

Copy link

@moussa-b 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 yuvalov-bezeq commented Jun 1, 2017

Thank you very much for this 👍

@yourNameIsGood

This comment has been minimized.

Copy link

@yourNameIsGood 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 sainathpabba-thrymr commented Jun 17, 2017

Thank You...

@atanas3angelov

This comment has been minimized.

Copy link

@atanas3angelov atanas3angelov commented Aug 7, 2017

Thank you, JustMaier. :)

@bmomani1

This comment has been minimized.

Copy link

@bmomani1 bmomani1 commented Oct 2, 2017

@TLBSoftware

This comment has been minimized.

Copy link

@TLBSoftware 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 ulrichdohou commented Apr 5, 2018

Thats you. It works perfectly for my case

@kennymuse

This comment has been minimized.

Copy link

@kennymuse 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 Zeioth commented Jul 10, 2018

Simple and elegant, thanks!

@shashidhar7

This comment has been minimized.

Copy link

@shashidhar7 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