Как получить данные буфера обмена в angular JS

Ответ 1

Я создал директиву для копирования в буфер обмена, в которой используется метод document.execCommand().

Директива

(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> 

Ответ 2

здесь краткую версию, которую я использую -

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();
}

Ответ 3

BTW, если вы используете Angular для копирования в буфер обмена с помощью приложения Chrome Packaged, выполните следующие действия:

• Добавьте "clipboardRead" и "clipboardWrite" к "разрешениям" в манифесте. json.
• используйте ng-click в вашем представлении, чтобы скопировать значение в область контроллера $, например: data-ng-click = "copyUrlToClipboard (file.webContentLink)"

• Поместите функцию в свой контроллер следующим образом:

  $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('copy');
      body.removeChild(copyFrom);
      this.flashMessage('over5');
  }

Ответ 4

У меня была та же проблема, и я использовал функцию angular -clipboard [1], которая использует новые API выбора и API буфера обмена, доступные в последних браузерах.

Сначала мы должны установить angular -clipboard lib, я использую беседу.

$ bower install angular-clipboard --save

Чтобы импортировать модуль, используйте следующий в html.

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

Чтобы задать значения для элемента с использованием $scope в контроллере

$scope.textToCopy = 'Testing clip board';

Загрузите модуль буфера обмена, используя

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

Это работает для Chrome 43+, Firefox 41+, Opera 29+ и IE10 +.

Прост и проработан.

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

Спасибо,