Awesome
ngclipboard
An angularjs directive to copy text to clipboard without using flash
Angularjs directive for clipboard.js by @zenorocha
Install
You can get it on npm.
npm install ngclipboard --save
Or bower, too.
bower install ngclipboard --save
If you're not into package management, just download a ZIP file.
Setup
First, include angularjs and clipboard.js into your document.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
Then Include ngclipboard.js.
<script src="dist/ngclipboard.min.js"></script>
Add ngclipboard
dependency to your module
var myApp = angular.module('app', ['ngclipboard']);
Finally, add ngclipboard
directive to the wanted html element.
<button class="btn" ngclipboard data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
Usage
We're living a declarative renaissance, that's why we decided to take advantage of HTML5 data attributes for better usability.
Copy text from another element
A pretty common use case is to copy content from another element. You can do that by adding a data-clipboard-target
attribute in your trigger element.
The value you include on this attribute needs to match another's element selector.
<a href="https://zenorocha.github.io/clipboard.js/#example-target"><img width="473" alt="example-2" src="https://cloud.githubusercontent.com/assets/398893/9983467/a4946aaa-5fb1-11e5-9780-f09fcd7ca6c8.png"></a>
<!-- Target -->
<input id="foo" value="https://github.com/sachinchoolur/ngclipboard.git">
<!-- Trigger -->
<button class="btn" ngclipboard data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
Cut text from another element
Additionally, you can define a data-clipboard-action
attribute to specify if you want to either copy
or cut
content.
If you omit this attribute, copy
will be used by default.
<a href="https://zenorocha.github.io/clipboard.js/#example-action"><img width="473" alt="example-3" src="https://cloud.githubusercontent.com/assets/398893/10000358/7df57b9c-6050-11e5-9cd1-fbc51d2fd0a7.png"></a>
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" ngclipboard data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
As you may expect, the cut
action only works on <input>
or <textarea>
elements.
Copy text from attribute
Truth is, you don't even need another element to copy its content from. You can just include a data-clipboard-text
attribute in your trigger element.
<a href="https://zenorocha.github.io/clipboard.js/#example-text"><img width="147" alt="example-1" src="https://cloud.githubusercontent.com/assets/398893/10000347/6e16cf8c-6050-11e5-9883-1c5681f9ec45.png"></a>
<!-- Trigger -->
<button class="btn" ngclipboard data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
Events
There are cases where you'd like to show some user feedback or capture what has been selected after a copy/cut operation.
That's why we fire custom events such as success
and error
for you to listen and implement your custom logic.
ngclipboard provides you two attributes called ngclipboard-success
and ngclipboard-error
to listen the clipboard events and implement your custom logic.
<button class="btn" ngclipboard ngclipboard-success="onSuccess(e);" ngclipboard-error="onError(e);" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
// You can still access the clipboard.js event
$scope.onSuccess = function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
};
$scope.onError = function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
}
For a live demonstration, open this site and just your console :)
Browser Support
This library relies on both Selection and execCommand APIs. The first one is supported by all browsers while the second one is supported in the following browsers.
<img src="https://clipboardjs.com/assets/images/chrome.png" width="48px" height="48px" alt="Chrome logo"> | <img src="https://clipboardjs.com/assets/images/edge.png" width="48px" height="48px" alt="Edge logo"> | <img src="https://clipboardjs.com/assets/images/firefox.png" width="48px" height="48px" alt="Firefox logo"> | <img src="https://clipboardjs.com/assets/images/ie.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="https://clipboardjs.com/assets/images/opera.png" width="48px" height="48px" alt="Opera logo"> | <img src="https://clipboardjs.com/assets/images/safari.png" width="48px" height="48px" alt="Safari logo"> |
---|---|---|---|---|---|
42+ ✔ | 12+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | 10+ ✔ |
The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied!
when success
event is called and Press Ctrl+C to copy
when error
event is called because the text is already selected.
License
MIT License