omichelsen / angular-clipboard Goto Github PK
View Code? Open in Web Editor NEWCopy to clipboard with AngularJS directive, without using Flash.
License: MIT License
Copy to clipboard with AngularJS directive, without using Flash.
License: MIT License
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 ?
Basically i want to disable the Copy button if the browser is old and doesn't support this feature.
Please advise
Directive should call the on-error
in such situation. However, the on-copied
is called.
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
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
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.
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
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.
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.
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
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 ?
Tried your demo in firefox. the copy doesn't work.. I am using firefox 40.0.3
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
Is there a way to show what has been copied?
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>
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:
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!
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.
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
When would an error happen? what is the situation and what are the chances for it to happen? In which cases?
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.
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.
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?
When testing your demo in iOS it just brings up the keyboard and does not copy
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.
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.
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.
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.
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?
I can‘t find any method readText
and readText
of Clipboard API.
So, i think this project not support Clipboard API.
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.
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
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.
What does the author do when some browsers don't support? Is a browser of the Chinese Tencent, seeking the author to provide ideas
Can you please add release notes when creating github releases. It helps see what changed and new features users can use
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.