2

Alguém sabe se existe um meio de transferir o valor de uma variável para o Ctrl+C?

Estou trabalhando com AngularJS e dentro do scope tenho uma variável que gostaria de passar para o clipboard, mas não encontro nada que me ajude.

Segue o código:

JS:

(function(){
  'use script';

  angular
    .module('myApp')
    .controller('meuCtrl', meuCtrl);

  meuCtrl.$inject = ['$scope'];

  function meuCtrl($scope){
    $scope.grupos = [
      {
        "numero": 1,
        "nome": "Grupo 1",
        "link": "https://www.google.com.br/maps",
        "visitado": true,
        "data": "15/09/2017"
      },
      {
        "numero": 2,
        "nome": "Grupo 2",
        "link": "https://mail.google.com/mail/u/0/#inbox",
        "visitado": true,
        "data": "15/09/2017"
      }
    ]
    $scope.copiar = function(teste) {
      // aqui deve ser feita a atribuição
      // clipboard = teste;
    }
  }
})();

Html:

<section ng-controller="meuCtrl">
  <div ng-repeat="grupo in grupos">
    <div ng-click="copiar(grupo.nome)">
      <span>{{grupo.numero}}</span>
    </div>
     <div class="w3-container w3-button">
      <a target="_blank" href="{{grupo.link}}"> <span>{{grupo.nome}}</span> </a>
    </div>
  </div>
</section>
0

3 Respostas 3

3

Encontrei nesta resposta How do I copy to the clipboard in JavaScript? um script que deve funcionar

PS: Sei q você esta usando angular, mas nada impede de usar JS normal n é mesmo?

Veja se te ajuda.

/*
 * Copia o texto passado por paramêtro para o clipboard.
 * @param {type} text
 * @returns {undefined|Boolean}
 */
function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // IE specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text);

    } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        } catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        } finally {
            document.body.removeChild(textarea);
        }
    }
}

O uso no teu Angular provavelmente deve ficar assim:

$scope.copiar = function(teste) {
    copyToClipboard(teste);
}
3
  • Quando for copiar coisas de outros desenvolvedores cite a fontes stackoverflow.com/a/33928558/1518921, não é legal você pegar algo feito por outro e deixar de citar quem teve o trabalho e ainda compartilhou de graça.
    – Syzoth
    Commented 15/09/2017 às 19:27
  • 1
    Olá Guilherme, realmente.. Havia copiado essa resposta para minha utilização já há algum tempo. No entanto não salvei a resposta para fazer a vinculação agora. Peço desculpas por ter esquecido de efetuar a citação neste momento. Commented 15/09/2017 às 19:37
  • Editei tua resposta, removendo redundâncias e adicionando o uso do script dentro do scope do Angular, assim ajuda o autor da pergunta ... se discordar de algo basta fazer o rollback na edição. Até mais.
    – Syzoth
    Commented 15/09/2017 às 19:52
0

A algum tempo precisei e utilizei esse código. Abaixo, o código e exemplo de uso:

(function (angular) {
    'use strict';

    /// Diretiva para simular o Copy to Clipboard
    /// Será copiado o texto passado na diretiva
    /// Uso: <button stk-click-copy="TEXTO A SER COPIADO" type="button"></button>
    angular.module('stkClickCopy', []);
    angular.module('stkClickCopy').service('stkCopy', StkCopy);
    angular.module('stkClickCopy').directive('stkClickCopy', StkClickCopy);

    StkCopy.$inject = ['$window'];
    StkClickCopy.$inject = ['stkCopy'];

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

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

            try {
                var successful = document.execCommand('copy');
                if (!successful) throw successful;
            } catch (err) {
                window.prompt("Copy to clipboard: Ctrl+C, Enter", toCopy);
            }

            textarea.remove();
        }
    }

    function StkClickCopy(stkCopy) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                element.bind('click', function (e) {
                    stkCopy(attrs.stkClickCopy);
                });
            }
        }
    }
})(angular);

Salve esse código em um arquivo js e importe-o no seu projeto

<script src="stkClickCopy.js"></script>

Adicione o componente no seu projeto:

angular.module('myApp', ['stkClickCopy']);

E use na sua view:

<button stk-click-copy="{{ minhaVariavel }}" type="button"></button>
0
-1

Atribui diretamente a função ao scope. Funcionou exatamente como eu precisava, muito obrigado.

$scope.copiar = function(text) {
      if (window.clipboardData && window.clipboardData.setData) {
        // IE specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text);

      } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
          return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        } catch (ex) {
          console.warn("Copy to clipboard failed.", ex);
          return false;
        } finally {
          document.body.removeChild(textarea);
        }
      }
    }

1
  • 1
    Que bom que você gostou das respostas! Mas a melhor forma de agradecer a quem te ajudou é assinalando "aceite" na melhor resposta e votando em todas que te ajudaram. Assim você garante que quem escreveu a resposta receba algo em troca, além de tornar o site mais limpo e útil para todo mundo. Adicionar uma nova resposta assim (que não é uma resposta pra pergunta e deve ser removida) deixa o site mais confuso e pode atrapalhar. Commented 15/09/2017 às 20:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .