AngularJS скопировать в буфер обмена

Question

Есть ли способ сделать кнопку копирования с функцией копирования, которая будет копировать все содержимое модального, и вы можете вставить его в блокноте

Answer 1

Вы можете использовать модуль, который я сделал, ngClipboard. Вот ссылка https://github.com/nico-val/ngClipboard

Вы можете использовать либо директиву ng-copyable, либо фабрику ngClipboard.toClipboard().

Answer 2

мне нужен эта функциональность в моем 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(); 
} 

P.S.
Вы можете добавить комментарий, рассказывающий мне, как плохо это manipulate DOM from a Controller.

Answer 3

, если вы не хотите, чтобы добавить новую библиотеку в проект, и вы создаете ее вашей собственной личностью, вот простое, простое решение:

Примечание: Я создал его с функциональностью обещание (которое удивительным)

здесь 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> 

надеюсь, что это экономит ваше время