omichelsen/angular-clipboard

Copy to clipboard with AngularJS directive, without using Flash.

angular-clipboard's Issues

to delete

When Copy is Performed, Internet Explorer 11 Scrolls Webpage Almost to the Top

The problem occurs on IE 11.0.33 on Windows 7.

Whenever copyText() is called, IE 11 scrolls a long page almost to the top. Thus, if a copy operation is performed somewhere in the middle or bottom of a page, a user's viewport suddenly jumps to the top.

I was able to reproduce the problem easily using your own demo.html. To reproduce take demo.html and insert:
`

line 1

line 2

...

line 99

line 100

`
just before h1: "Click button to copy text to clipboard"

Then click on "Copy" button, and IE would scroll the page up.

I attach modified demo.html (renamed to ie11_scroll.txt because of restriction on attaching html files).
ie11_scroll.txt

How do i feature detect if SelectionAPI or ClipboardAPI is supported by my browser without user interaction and hide the copy button if not available ?

How do i feature detect if SelectionAPI or ClipboardAPI is supported by my browser without user interaction and hide the copy button if not available ?
Basically i want to disable the Copy button if the browser is old and doesn't support this feature.

Please advise

IE: Call on-error when the access to clipboard is denied

1. Open IE and go the the page with this directive.
2. Click it.
3. A confirmation whether to allow the access to clipboard is shown.
4. Deny it.

Directive should call the on-error in such situation. However, the on-copied is called.

IOS Safari - page jumps when copying

I have a copy button at the bottom of page. When clicked, the page zooms and scrolls to the top a little bit. Also, I see an iphone keyboard blink (appears and disappears). Does anybody know how to fix it?

PS I thought it might be because of temporary node having font smaller than 16px - then iphone zooms input controls when they are in focus. textarea[style^="position: absolute; left: -10000px; top: "] {font-size: 16px;} - this funny css hack didn't help )

Thanks for any ideas

Throw error: "failure copy"

When I try to copy a result from a promise it throw an error in console failure copy
I use angular 1.5.8

The browser I use is full supported as the documentation provided

Expression 'undefined' in attribute 'supported' used with directive 'clipboard' is non-assignable!

I run the exceptionless project and I found this in my error logs this morning:

Error: [$compile:nonassign] Expression 'undefined' in attribute 'supported' used with directive 'clipboard' is non-assignable!
http://errors.angularjs.org/1.5.5/$compile/nonassign?p0=undefined&p1=supported&p2=clipboard

Brower:

Mozilla/5.0 (Windows NT 6.3; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0

I believe it happened on this line of code. There is no supported attribute defined so I think the directive has some issues with this. I tried to reproduce locally on firefox on OSX but couldn't reproduce.

Can we have a service that could handle the copy to clipboard feature without having to click on a button?

Hi,
Thanks for the module. Will it be possible to have a service that can be injected and used for a copy to clipboard functionality? I have a use case where I can not show the copy to the clipboard button but some other generic link has to do this action dynamically.
thanks and regards

Ctrl + C

First off, just wanted to say thanks for this awesome directive. Helped me save a bunch of time at work.

Anyways, I had to implement Ctrl +C for a project and I extended the functionality of this directive.

I have the code with tests written in typescript but I can quickly write it out in javascript and make a pull request. Let me know if that is something you would be interested in adding to the project.

Typescript definitions file

It would be nice to have a Typescript file for angular-clipboard in https://github.com/DefinitelyTyped/DefinitelyTyped/.

I can probably do this if you are not interested.

Didn't work on Firefox

I tried your demo (https://rawgit.com/omichelsen/angular-clipboard/master/demo/demo.html) and got an error:

Error! Object { result=2147500037, name="NS_ERROR_FAILURE", filename="https://rawgit.com/omich...er/angular-clipboard.js", more...}
demo.html (line 29)

Firefox version 38.0
Linux mint 17.1

throw failure copy

Hi, and thank you for this small module.
I'm trying to resize image and convert to base64 text and copy to clipboard.
But it throws error when higher resolution image to copy.
Is copy text has limit ?

Doesn't seem to be working in Firefox 40

Tried your demo in firefox. the copy doesn't work.. I am using firefox 40.0.3

Safari browser support

i want to use it in ipads. since most of them use safari by default . It would be good if you could add safari browser support.
Thanks

it doesn't retain the format. it turns to a single line. I'd like to retain the json format when copy to somewhere else.

Hi everybody

it doesn't retain the format. it turns to a single line. I'd like to retain the json format when copy to somewhere else.

A way to show what has been copied?

Is there a way to show what has been copied?

add ng-text

It would be nice to support a ng-text that can contain model variables such as

<a class="btn btn-default" clipboard ng-text="some-command --createuser --firstname '{{person.first_name}}' --lastname '{{person.last_name}}' -u '{{person.username}}' -a -g '{{person.groups | join:','}}'"><i class="fa fa-files-o"></i> Copy</a>

Issue with copying from within modal

I'm using angular-clipboard in several different places (it's great btw), but have recently run into an issue where the text is not copying from within a modal. I did a basic test on Plunkr with a modal which seems to be working fine, so there must be something else causing this.

Working Plunkr: http://plnkr.co/GdY5y2sm688RvwnzGGgg

For the code that doesn't work:

• Here is the function that appends the modal directive to the body: https://github.com/kahboom/apiman/blob/752-753-copy-improvements/manager/ui/hawtio/plugins/api-manager/ts/app/app-apis.ts#L19
• The modal directive is in the same file as above, just scroll all the way down.
• The HTML that references the copy-to-clipboard directive from within the modal: https://github.com/kahboom/apiman/blob/752-753-copy-improvements/manager/ui/hawtio/plugins/api-manager/html/app/apiModal.html#L24

Adding a console.log(); to the angular-clipboard directive shows that the correct text is 'captured' in the createNode and copyText functions.

This is a working example within the same project (not within a modal): https://github.com/kahboom/apiman/blob/752-753-copy-improvements/manager/ui/hawtio/plugins/api-manager/html/app/app-apis.html#L72

Btw this is on OSX El Capitan & Chrome. I'd appreciate any feedback or input. Thanks in advance!

Add the ajax response to clipboard using clipboard.copyText(response.content).

Example:

Add the below code on the ng-click.

$http.get($scope.selectedRow.Id).then(function (result) {
clipboard.copyText(response.content).
});

on executing ng-click. I am getting the failure exception.
Please let us know How to use clipboard.copyText in above case.

Not working on IE11

I've just tested the demo on IE11 and it does not seem to work. The content is not copied to the clipboard even if the logs show "Copied!".
The version of my browser is Internet Explorer 11.0.9600.17959

Error types

When would an error happen? what is the situation and what are the chances for it to happen? In which cases?

Check for angular being available as global variable before using require

When I've a context where there is require available, but loading angular directly via a file (which might very well be the case for an electron app), your method of requiring angular throws errors. If you add a simple check if angular is defined as global variable first, everything should be fine.

Add a directive to automatically hide an element if copy isn't supported

ng-clip has an attribute called auto-hide-on-no-flash that hides an element it's placed on if copying isn't supported. Is there any chance we could add something like this? I might want to add progressive enhancements when copy is supported.

Can't copy data from HTTP call

This doesn't work:

	$scope.copyPassword = function(item) {
		$http.get(API + "/password/" + item.id).then(function(resp) {
			clipboard.copyText('Test');
		}).catch(function(error) {
			console.log(error);
		});
	}

But when you move the clipboard.copyTest out of the HTTP call it works:

	$scope.copyPassword = function(item) {
		clipboard.copyText('Test');
		$http.get(API + "/password/" + item.id).then(function(resp) {
		}).catch(function(error) {
			console.log(error);
		});
	}

Any idea why @omichelsen?

On ios clicking the copy button does not copy

When testing your demo in iOS it just brings up the keyboard and does not copy

Cannot copy url

angular.js:13920Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 5 of the expression [http://...] starting at [://...].

when

text="http://..."

So when text contains a url angular-clipboard is failing with the above error message.

Nothing is copied in Chrome Canary when CSS styles of body has '-webkit-user-select:none'

version of Chrome Canary: 45.0.2434.0 canary (64-bit).

And my workaround is temporarily change the document.body.style.webkitUserSelect to initial to override styles in CSS files and reset it after the selection is successfully done.

And I have made a pr request, hope that will help.

Don't require angular in module.exports

Adding angular as a peerDependency in package.json and requiring it in module.exports causes issues when an app loads angular through a CDN instead of as an npm package:

Error: Cannot find module 'angular'

Most angular plugins assume angular is already defined and don't make any require() calls themselves.

Multi-line Copy

Hello,

I recently used the directive in my own project and it was great but one problem was multi-line copying. I tried using line breaks and even carriage returns but they both eventually broke. I finally got around it by changing node.textContent to node.innerHTML within the createNode function. Then all I had to do was put line break tags in my txt and now it formats perfectly to new lines and the copying also keeps the formatting.

Just wondering if you'd like the update for multi-line copying.

Define on-success callback globally

Great work!
I want to set a global on-success callback for all instances throughout the app.
Is this possible without changing the source code or adding another directive?

Please support the paste operation

I can‘t find any method readText and readText of Clipboard API.
So, i think this project not support Clipboard API.

Won't copy from disabled input element

Mixing this up with AngularStrap
My input field is disabled
I want to alert user when a text is copied
I might be missing something here, going through the directive now.

clipboard.copyText() opens the keyboard on IOS

Hi
My problem is that when I run clipboard.copyText(someEmailAddresses); on IOS the screen keyboard is opened instead of copying the emailaddresses to the clipboard.

Its the same problem in both Safari and Chrome on IOS, but it works perfectly in windows.

Thanks for help

IE: Prevent page scrolling on copy

On larger pages the scrollbar will jump to the hidden node, i.e. the end of the document on node.select() - at least in IE 11. You can try it at https://plnkr.co/JMOnatFAlWrh0R53FuTu.

Compatibility

What does the author do when some browsers don't support? Is a browser of the Chinese Tencent, seeking the author to provide ideas

Add release notes

Can you please add release notes when creating github releases. It helps see what changed and new features users can use

Should the title function be bound with & instead of =?

I was able to integrate this into a project but I had to update to bind the text callback with & instead of = and evaluate the expression when clicked (ie. scope.$eval(scope.text)). Any chance this can be changed? I can send a pull-request. Or perhaps this can be added as a separate attribute.

Thanks!

Scott