Question

我实际上是想使用角度JS来获取剪贴板的内容来模拟复制粘贴的东西。

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

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

Answer 3

顺便说一句，如果使用Angular通过Chrome打包应用程序复制到剪贴板，请执行以下操作：

将“clipboardRead”和“clipboardWrite”添加到manifest.json中的“权限”。
在视图中使用ng-click将值提供给控制器$ scope，例如：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');
}

Answer 4

我遇到了同样的问题，我使用了角度剪贴板功能[1]，它使用了最新浏览器中提供的新选择API和剪贴板API。

首先我们必须安装angular-clipboard lib，我正在使用bower。

$ 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 +。

简单＆amp;工作得很好。

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

谢谢，

Answer 5

一种完全不同的方法：

我需要在窗口之间复制和粘贴文本，因此我使用this将数据保存（复制）到本地存储中。然后，在另一个窗口中，我使用相同的密钥将其从本地存储中加载，然后可以按照自己的意愿“粘贴”。

如何在角度JS中获取剪贴板数据

5 个答案: