Corner copy to clipboard

Question

Is there a way to make a copy button with a copy function that will copy the entire contents of the modal file and you can paste it into notepad

Answer 1

I need this functionality in my Controller , since the text to be copied is dynamic, here my simple function is based on the code in ngClipboard :

 function share() { var text_to_share = "hello world"; // create temp element var copyElement = document.createElement("span"); copyElement.appendChild(document.createTextNode(text_to_share)); copyElement.id = 'tempCopyToClipboard'; angular.element(document.body.append(copyElement)); // select the text var range = document.createRange(); range.selectNode(copyElement); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); // copy & cleanup document.execCommand('copy'); window.getSelection().removeAllRanges(); copyElement.remove(); } 

PS
You can add a comment telling me how bad this is about manipulating the DOM with a controller.

Answer 2

You can use the module I made, ngClipboard. Here is the link https://github.com/nico-val/ngClipboard

You can use either the ng-copyable directive or the ngClipboard.toClipboard() factory.

Answer 3

if you do not want to add a new library to your project, and you create it yourself, here is a simple and simple solution:

Note: I created it with promise functionality (which is surprising)

here is CopyToClipboard.js module file

 angular.module('CopyToClipboard', []) .controller('CopyToClipboardController', function () { }) .provider('$copyToClipboard', [function () { this.$get = ['$q', '$window', function ($q, $window) { var body = angular.element($window.document.body); var textarea = angular.element('<textarea/>'); textarea.css({ position: 'fixed', opacity: '0' }); return { copy: function (stringToCopy) { var deferred = $q.defer(); deferred.notify("copying the text to clipboard"); textarea.val(stringToCopy); body.append(textarea); textarea[0].select(); try { var successful = $window.document.execCommand('copy'); if (!successful) throw successful; deferred.resolve(successful); } catch (err) { deferred.reject(err); //window.prompt("Copy to clipboard: Ctrl+C, Enter", toCopy); } finally { textarea.remove(); } return deferred.promise; } }; }]; }]); 

what is he thanks https://gist.github.com/JustMaier/6ef7788709d675bd8230

now you can use it

 angular.module('somthing') .controller('somthingController', function ($scope, $copyToClipboard) { // you are free to do what you want $scope.copyHrefToClipboard = function() { $copyToClipboard.copy(/*string to be coppied*/$scope.shareLinkInfo.url).then(function () { //show some notification }); }; } 

and finally HTML

 <i class="fa fa-clipboard" data-ng-click="copyHrefToClipboard($event)"></i> 

hope it saves you time