web-dev-qa-db-ja.com

AngularJSをクリップボードにコピー

モーダルのすべてのコンテンツをコピーし、メモ帳に貼り付けることができるコピー機能を備えたコピーボタンを作成する方法はありますか

angularjsclipboard
18
user3799365

コピーするテキストは動的であるため、Controllerにこの機能が必要でした。これは ngClipboard モジュールのコードに基づく単純な関数です。

function share() {
    var text_to_share = "hello world";

    // create temp element
    var copyElement = document.createElement("span");
    copyElement.appendChild(document.createTextNode(text_to_share));
    copyElement.id = 'tempCopyToClipboard';
    angular.element(document.body.append(copyElement));

    // select the text
    var range = document.createRange();
    range.selectNode(copyElement);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);

    // copy & cleanup
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
    copyElement.remove();
}

PS
コメントの追加を歓迎します。 コントローラーからDOMを操作する の悪さを教えてください。

16
marmor

Jqueryサポートがある場合は、このディレクティブを使用してください

.directive('copyToClipboard', function () {
        return {
            restrict: 'A',
            link: function (scope, elem, attrs) {
                elem.click(function () {
                    if (attrs.copyToClipboard) {
                        var $temp_input = $("<input>");
                        $("body").append($temp_input);
                        $temp_input.val(attrs.copyToClipboard).select();
                        document.execCommand("copy");
                        $temp_input.remove();
                    }
                });
            }
        };
    });

HTML

<a href="" copy-to-clipboard="Text to copy">Copy text</a>
8
byteC0de

プロジェクトに新しいライブラリを追加したくない場合、自分で作成する場合は、次のシンプルで簡単なソリューションをご覧ください。

注：promise機能で作成しました（これは素晴らしいです）

ここは CopyToClipboard.js module file

angular.module('CopyToClipboard', [])
        .controller('CopyToClipboardController', function () {

        })
        .provider('$copyToClipboard', [function () {

            this.$get = ['$q', '$window', function ($q, $window) {
                var body = angular.element($window.document.body);
                var textarea = angular.element('<textarea/>');
                textarea.css({
                    position: 'fixed',
                    opacity: '0'
                });
                return {
                    copy: function (stringToCopy) {
                        var deferred = $q.defer();
                        deferred.notify("copying the text to clipboard");
                        textarea.val(stringToCopy);
                        body.append(textarea);
                        textarea[0].select();

                        try {
                            var successful = $window.document.execCommand('copy');
                            if (!successful) throw successful;
                            deferred.resolve(successful);
                        } catch (err) {
                            deferred.reject(err);
                            //window.Prompt("Copy to clipboard: Ctrl+C, Enter", toCopy);
                        } finally {
                            textarea.remove();
                        }
                        return deferred.promise;
                    }
                };
            }];
        }]);

それだけです https://Gist.github.com/JustMaier/6ef7788709d675bd82

今それを使用しましょう

angular.module('somthing')
   .controller('somthingController', function ($scope, $copyToClipboard) {
       // you are free to do what you want
            $scope.copyHrefToClipboard = function() {
            $copyToClipboard.copy(/*string to be coppied*/$scope.shareLinkInfo.url).then(function () {
                //show some notification
            });
        };
   }

そして最後にHTML

<i class="fa fa-clipboard" data-ng-click="copyHrefToClipboard($event)"></i>

これがあなたの時間を節約することを願っています

8
Basheer AL-MOMANI

私が作成したモジュールngClipboardを使用できます。リンクはこちら https://github.com/nico-val/ngClipboard

_ng-copyable_ディレクティブ、またはngClipboard.toClipboard()ファクトリーを使用できます。

3
Nicolás Valenzuela