web-dev-qa-db-ja.com

angular JSでクリップボードデータを取得する方法

私は実際にangular JSを使用してコピーボードの内容をシミュレートするためにJSを使用してクリップボードのコンテンツを取得することを探していました。

angularjsclipboardclipboarddata
14
Tasneem Hyder

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>
6
Farhad Yasir

ここに私が使用する簡潔なバージョンがあります-

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

ところで、Angularを使用してChrome Packaged Appでクリップボードにコピーする場合は、次のようにします。

  1. Manifest.jsonの「許可」に「clipboardRead」と「clipboardWrite」を追加します。
  2. ビューでng-clickを使用して、値をコントローラー$ scopeにフィードします。例：data-ng-click = "copyUrlToClipboard（file.webContentLink）"

  3. 次のような関数をコントローラーに配置します。

    $ 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'）; 
}
2
Yves

同じ問題があり、最新のブラウザで利用可能な新しい選択APIとクリップボードAPIを使用する角度クリップボード機能[1]を使用しました。

まず、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

おかげで、

0
Kandy

完全に異なるアプローチ：

ウィンドウ間でテキストをコピーして貼り付ける必要があるため、ローカルストレージにデータを保存（コピー）するために this を使用しました。次に、別のウィンドウで、同じキーを使用してローカルストレージからロードし、「貼り付け」を行います。

0
Sean