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

Question

実際には、コピー貼り付けのものをシミュレートするために角度JSを使用してクリップボードの内容を取得しようとしていました。

Answer 1

ところで、次の操作を行い、クロームパッケージ化されたアプリケーションでクリップボードにコピーするアンギュラ使用している場合：

1. はmanifest.jsonをで「権限」に「clipboardRead」と「clipboardWrite」を追加します。
2. 使用のように、コントローラの$スコープに値を供給するために、あなたのビューでNGクリック：
   ：データ-ngのクリック=「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'); 
   }

Answer 2

私は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> 

Answer 3

は、ここで私が使用して簡潔なバージョンです -

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

Answer 4

私は同じ問題を持っていた私は、角度-クリップボード機能を使用[1]私たち最新のブラウザで利用可能な新しいSelection APIとClipboard API。

まず、角クリップボードをインストールする必要があります。私はbowerを使用しています。

次のようにhtmlでモジュールをインポートします。これはクローム43+は、Firefox 41+、オペラ29作品、

angular.module('testmodule', ['angular-clipboard']); 

を使用してクリップボードモジュールをロードし、コントローラで$スコープを使用して要素に

$scope.textToCopy = 'Testing clip board'; 

を値を設定する

<script src="../../bower_components/angular-clipboard/angular-clipboard.js"></script> 

+およびIE10 +。

その単純な&は正常に機能しました。

[1] https://www.npmjs.com/package/angular-clipboard

おかげで、