15

私は実際に角度付きJSを使用してクリップボードのコンテンツを取得して、コピーペーストをシミュレートしようとしていました。

4

5 に答える 5

9

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>
于 2016-02-04T03:55:56.353 に答える
4

これが私が使用する簡潔なバージョンです-

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();
}
于 2016-08-19T01:51:00.430 に答える
2

ところで、Angular を使用して Chrome パッケージ アプリでクリップボードにコピーする場合は、次の手順を実行します。

  1. manifest.json の「permissions」に「clipboardRead」と「clipboardWrite」を追加します。
  2. ビューで ng-click を使用して、次のようにコントローラの $scope に値をフィードします: data-ng-click="copyUrlToClipboard(file.webContentLink)"

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

    $scope.copyUrlToClipboard = 関数(URL) {
    var copyFrom = document.createElement("テキストエリア");
    copyFrom.textContent = url;
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(copyFrom);
    copyFrom.select();
    document.execCommand('コピー');
    body.removeChild(copyFrom);
    this.flashMessage('over5');
}
于 2014-10-30T18:18:37.653 に答える
0

同じ問題があり、最新のブラウザーで利用可能な新しい選択 API とクリップボード API を使用する angular-clipboard 機能 [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

ありがとう、

于 2017-05-03T08:47:00.943 に答える
0

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

ウィンドウ間でテキストをコピー & ペーストする必要があるため、これを使用してデータをローカル ストレージに保存 (コピー) しました。次に、別のウィンドウで、同じキーを使用してローカル ストレージからロードし、好きなように「貼り付ける」ことができます。

于 2018-10-01T14:49:31.770 に答える