web-dev-qa-db-fra.com

comment obtenir les données du presse-papier en JS angulaire

Je cherchais en fait à obtenir le contenu du presse-papiers en utilisant JS angulaire pour simuler un copier-coller.

angularjsclipboardclipboarddata
14
Tasneem Hyder

J'ai créé une directive pour copier dans le presse-papier qui utilise la méthode document.execCommand () .

Directive 

(function() {
app.directive('copyToClipboard',  function ($window) {
        var body = angular.element($window.document.body);
        var textarea = angular.element('<textarea/>');
        textarea.css({
            position: 'fixed',
            opacity: '0'
        });

        function copy(toCopy) {
            textarea.val(toCopy);
            body.append(textarea);
            textarea[0].select();

            try {
                var successful = document.execCommand('copy');
                if (!successful) throw successful;
            } catch (err) {
                console.log("failed to copy", toCopy);
            }
            textarea.remove();
        }

        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                element.bind('click', function (e) {
                    copy(attrs.copyToClipboard);
                });
            }
        }
    })
}).call(this);

Html

<button  copy-to-clipboard="Copy Me!!!!" class="button">COPY</button>
6
nutboltu

voici une version concise que j'utilise -

function copyToClipboard(data) {
    angular.element('<textarea/>')
        .css({ 'opacity' : '0', 'position' : 'fixed' })
        .text(data)
        .appendTo(angular.element($window.document.body))
        .select()
        .each(function() { document.execCommand('copy') })
        .remove();
}
4
0cd

Par BTW, si vous utilisez Angular pour copier dans le Presse-papiers avec une application fournie Chrome, procédez comme suit:

  1. Ajoutez "clipboardRead" et "clipboardWrite" aux "autorisations" dans le fichier manifest.json.
  2. utilisez ng-click dans votre vue pour fournir la valeur au contrôleur $ scope, par exemple: data-ng-click = "copyUrlToClipboard (file.webContentLink)"

  3. Mettez une fonction dans votre contrôleur comme:

    $ scope.copyUrlToClipboard = function (url) {
 var copyFrom = document.createElement ("textarea"); 
 copyFrom.textContent = url; 
 var body = document.getElementsByTagName ('body') [0]; 
 body.appendChild (copyFrom); 
 copyFrom.select (); 
 document.execCommand ('copie'); 
 body.removeChild (copyFrom); 
 this.flashMessage ('over5'); 
}
2
Yves

J'ai eu le même problème et j'ai utilisé la fonction angular-Clipboard [1], qui utilise les nouvelles API de sélection et Clipboard disponibles dans les derniers navigateurs.

Nous devons d’abord installer angular-clipboard lib, j’utilise Bower.

$ bower install angular-clipboard --save

Pour importer le module, utilisez la suite en HTML. 

<script src="../../bower_components/angular-clipboard/angular-clipboard.js"></script>

Pour définir des valeurs pour element en utilisant $ scope dans le contrôleur

$scope.textToCopy = 'Testing clip board';

Chargez le module presse-papier en utilisant,

angular.module('testmodule', ['angular-clipboard']);

Cela fonctionne pour Chrome 43+, Firefox 41+, Opera 29+ et IE10 +.

C'est simple et a bien fonctionné.

[1] https://www.npmjs.com/package/angular-clipboard

Merci,

0
Kandy

Une approche complètement différente:

J'ai besoin de copier-coller du texte entre les fenêtres, j'ai donc utilisé this pour enregistrer (copier) les données sur un stockage local. Ensuite, dans l'autre fenêtre, je le charge en dehors de la mémoire de stockage locale, en utilisant la même clé, et je peux ensuite "coller" comme bon me semble.

0
Sean