AngularJS를 클립보드로 복사

AngularJS를 클립보드로 복사

모달의 모든 내용을 복사하여 메모장에 붙여넣기 할 수 있는 복사 기능이 있는 복사 버튼을 만드는 방법이 있습니까?

이 기능이 필요했습니다.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();
}

추신.
이제 컨트롤러에서 DOM을 조작하는 것이 얼마나 나쁜지 알려주는 코멘트를 추가해도 좋습니다.

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>

프로젝트에 새 라이브러리를 추가하고 싶지 않고 직접 라이브러리를 생성하는 경우 다음과 같은 간편하고 간편한 솔루션을 제공합니다.

note : 약속 기능으로 만들었습니다 (대박입니다)

여기에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/6ef7788709d675bd8230 덕분에 끝입니다.

이제 사용해요.

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>

이것이 당신의 시간을 절약하길 바랍니다.

제가 만든 모듈 ng클립보드를 사용하시면 됩니다.다음은 https://github.com/nico-val/ngClipboard 링크입니다.

둘 중 하나를 사용할 수 있습니다.ng-copyable지시, 또는ngClipboard.toClipboard()공장 .

document.execCommand를 사용하지 않습니다.대신 다음을 수행할 수 있습니다.

HTML:

<i class="fa fa-copy" ng-click="copyToClipboard('some text to copy')"></i>

컨트롤러:

$scope.copyToClipboard = function(string) {
    navigator.clipboard.writeText(string)
        .then(console.log('copied!'));          
}

HTML의 경우:

<a href="#" ><img src="/Images/copy.png" ng-click="copyToClipboard("TEXT_YOU_WANTTO_COPY")"></img></a>

컨트롤러에서:

$scope.copyToClipboard = function (name) {
    var copyElement = document.createElement("textarea");
    copyElement.style.position = 'fixed';
    copyElement.style.opacity = '0';
    copyElement.textContent =  decodeURI(name);
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(copyElement);
    copyElement.select();
    document.execCommand('copy');
    body.removeChild(copyElement);
}

시도해 보십시오.

app.service('ngCopy', ['$window', function ($window) {
    var body = angular.element($window.document.body);
    var textarea = angular.element('<textarea/>');
    textarea.css({
        position: 'fixed',
        opacity: '0'
    });

    return function (toCopy) {
        textarea.val(toCopy);
        body.append(textarea);
        textarea[0].select();

        try {
            var successful = document.execCommand('copy');
            if (!successful)
                throw successful;
           
        } catch (err) {
            window.prompt("Copy to clipboard: Ctrl+C, Enter", toCopy);
        }
        textarea.remove();
    }
}]);

이 서비스를 컨트롤러에 호출해야 합니다.다음과 같이 할 수 있습니다.

controllers.MyController = ['$scope', 'ngCopy',
function ($scope, ngCopy) {
      ngCopy(copyText);
}];

언급URL : https://stackoverflow.com/questions/29267589/angularjs-copy-to-clipboard