如何在 Angular JS 中获取剪贴板数据答案

【问题标题】：how to get clipboard data in angular JS如何在 Angular JS 中获取剪贴板数据
【发布时间】：2014-01-28 11:55:56
【问题描述】：

我实际上是在寻找使用 Angular JS 来模拟复制粘贴的东西来获取剪贴板的内容。

【问题讨论】：

强烈推荐angular-zeroclipboard，它比ng-clip 有更好的文档记录。我也没有让ng-clip 工作。
ng-clip 依赖于 ZeroClipboard（至少在某些操作模式下），并且在我的情况下更容易集成“复制到剪贴板”功能。我跟着these few steps 让它工作了。

标签： angularjs clipboard clipboarddata

【解决方案1】：

完全不同的方法：

我需要在窗口之间复制和粘贴文本，所以我使用this 将数据保存（复制）到本地存储。然后，在另一个窗口中，我使用相同的键将其从本地存储中加载出来，然后我可以随意“粘贴”。

【讨论】：

【解决方案2】：

我遇到了同样的问题，我使用了 angular-clipboard 功能[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+。

它简单且工作正常。

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

谢谢，

【讨论】：

【解决方案3】：

这是我使用的简洁版本 -

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

【讨论】：

当然看起来很简洁。我希望我能弄清楚它的工作原理。不为我复制。
angular.element() 不包含函数 appendTo() 除非您包含整个 jQuery 库。 select() 也是如此

【解决方案4】：

我创建了一个使用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>

【讨论】：

除了“复制我！！！”之外，怎么可能复制其他内容？ - 比如，一个文本区域的内容？
在Controller中，使用范围变量 $scope.copyMe = '';并在 textarea 值中使用此 var，如下所示。并在复制到剪贴板中使用相同的变量，如下所示：<button copy-to-clipboard="copyMe" class="button">COPY</button>
当我使用此代码时， textarea.val(toCopy) 不会将任何内容附加到 textarea 中（我的 toCopy 是文本 html）。当我将它附加到正文时，它实际上附加了 [object Object]。不知道这是怎么回事。
@MohammedSafwan 你能分享你的代码吗？你也在使用 Angular 1.5 吗？
@nutboltu 我正在使用AngularJS v1.2.20。使用这个代码sn-p有版本限制吗？

【解决方案5】：

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

在 manifest.json 中的“permissions”中添加“clipboardRead”和“clipboardWrite”。
在视图中使用 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');
}

【讨论】：