Need help with ngclipboard?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

sachinchoolur
386 Stars 92 Forks MIT License 48 Commits 26 Opened issues

Description

An angularjs directive to copy text to clipboard without using flash

Services available

!
?

Need anything else?

Contributors list

# 1,155
thumbna...
CSS
image-g...
Ubuntu
20 commits
# 362,180
JavaScr...
6 commits
# 270,361
gitlab
bitbuck...
CSS
HTML
1 commit
# 522,277
JavaScr...
1 commit
# 254,984
Elixir
Kotlin
Dart
Flutter
1 commit
# 26,943
Ruby
Rails
Compose...
Objecti...
1 commit
# 89,865
lazyloa...
HTML
CSS
angular...
1 commit
# 90,354
HTML
Google
service...
softwar...
1 commit
# 302,489
CSS
HTML
Shell
mutatio...
1 commit
# 1,246
ESLint
casperj...
phantom...
cython
1 commit

license travis bower npm

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.


Then Include ngclipboard.js.


Add

ngclipboard
dependency to your module
javascript
var myApp = angular.module('app', ['ngclipboard']);

Finally, add

ngclipboard
directive to the wanted html element.
    Copy to clipboard

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.

example-2



    Copy to clipboard

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.

example-3

Mussum ipsum cacilds...



    Cut to clipboard

As you may expect, the

cut
action only works on
 or 
 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.

example-1

    Copy to clipboard

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.
    Copy to clipboard

// 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.

| Chrome logo | Edge logo | Firefox logo | Internet Explorer logo | Opera logo | 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.