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

时间:2022-02-22 09:47:44

I was actually looking to get the content of clipboard using angular JS to simulate a copy paste thing.

我实际上是在寻找剪贴板的内容,使用角JS来模拟复制粘贴。

4 个解决方案

#1


5  

I created a directive for copy to clipboard which is using the document.execCommand() method.

我创建了一个指向剪贴板的指令,剪贴板使用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

Html

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

#2


4  

here's a concise version I use -

这是我使用的一个简明的版本-

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


2  

BTW, if using Angular to copy to clipboard with a Chrome Packaged App, do the following:

顺便说一句,如果用一个Chrome打包的应用程序把角复制到剪贴板上,请执行以下操作:

  1. Add "clipboardRead" and "clipboardWrite" to the "permissions" in the manifest.json.
  2. 将“剪贴板恐惧”和“剪贴板写”添加到manifest.json中的“权限”中。
  3. use ng-click in your view to feed the value to the controller $scope, like: data-ng-click="copyUrlToClipboard(file.webContentLink)"
  4. 在视图中使用ng-click来将值输入到控制器$scope,如:data-ng-click="copyUrlToClipboard(file.webContentLink)"
  5. Put a function in your controller like:

    在控制器中放置一个函数:

    $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


0  

I had the same issue and I used angular-clipboard feature[1] which uses new Selection API and Clipboard API available in the latest browsers.

我也遇到了同样的问题,我使用了angular-clipboard特性[1],它使用了最新浏览器中可用的新的选择API和剪贴板API。

First we have to install angular-clipboard lib, i'm using bower.

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

$ bower install angular-clipboard --save

To import the module use following in html.

要导入模块,请使用以下html。

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

To set values to element using $scope in controller

在控制器中使用$scope将值设置为元素

$scope.textToCopy = 'Testing clip board';

Load the clipboard module using,

使用,

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

This works for Chrome 43+, Firefox 41+, Opera 29+ and IE10+.

这适用于Chrome 43+、Firefox 41+、Opera 29+和IE10+。

Its simple & worked fine.

它简单,工作正常。

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

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

Thanks,

谢谢,

#1


5  

I created a directive for copy to clipboard which is using the document.execCommand() method.

我创建了一个指向剪贴板的指令,剪贴板使用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

Html

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

#2


4  

here's a concise version I use -

这是我使用的一个简明的版本-

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


2  

BTW, if using Angular to copy to clipboard with a Chrome Packaged App, do the following:

顺便说一句,如果用一个Chrome打包的应用程序把角复制到剪贴板上,请执行以下操作:

  1. Add "clipboardRead" and "clipboardWrite" to the "permissions" in the manifest.json.
  2. 将“剪贴板恐惧”和“剪贴板写”添加到manifest.json中的“权限”中。
  3. use ng-click in your view to feed the value to the controller $scope, like: data-ng-click="copyUrlToClipboard(file.webContentLink)"
  4. 在视图中使用ng-click来将值输入到控制器$scope,如:data-ng-click="copyUrlToClipboard(file.webContentLink)"
  5. Put a function in your controller like:

    在控制器中放置一个函数:

    $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


0  

I had the same issue and I used angular-clipboard feature[1] which uses new Selection API and Clipboard API available in the latest browsers.

我也遇到了同样的问题,我使用了angular-clipboard特性[1],它使用了最新浏览器中可用的新的选择API和剪贴板API。

First we have to install angular-clipboard lib, i'm using bower.

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

$ bower install angular-clipboard --save

To import the module use following in html.

要导入模块,请使用以下html。

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

To set values to element using $scope in controller

在控制器中使用$scope将值设置为元素

$scope.textToCopy = 'Testing clip board';

Load the clipboard module using,

使用,

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

This works for Chrome 43+, Firefox 41+, Opera 29+ and IE10+.

这适用于Chrome 43+、Firefox 41+、Opera 29+和IE10+。

Its simple & worked fine.

它简单,工作正常。

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

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

Thanks,

谢谢,