クリップボードにコピー

AngularJSでクリップボードにコピーする方法についてです。

今回はこちらのプラグイン（GitHub - omichelsen/angular-clipboard: Copy to clipboard with AngularJS directive, without using Flash.）を利用します。

インストール方法についてはリンク先に掲載されているのでそちらを参照してください。

CDNとして利用する場合はこちらから。

コピーの方法としては、コピー対象の文字列を直接HTMLのタグに指定する方法（Directive）と、JavaScript側で文字列を指定する方法（Service）の2パターンが用意されているようです。

HTML

<div ng-controller="SampleCtrl">
    <!-- 方法１ -->
    <button clipboard supported="supported" text="copyText1" on-copied="successCopy()" on-error="failCopy()">コピーテスト１</button>
    <!-- 方法２ -->
    <button ng-click="clickCopyTest2('コピーテスト２')">コピーテスト２</button>
</div>

JavaScript

var myApp = angular.module('ParticleArtApp', ['angular-clipboard']);
myApp.controller('SampleCtrl', function ($scope, clipboard) {
    // 方法１
    $scope.supported = false;
    $scope.copyText1 = 'コピーテスト１';
    $scope.successCopy = function () {
        alert("コピーテスト１成功");
    };
    $scope.failCopy = function () {
        alert("コピーテスト１失敗");
    };
    // 方法２
    if (!clipboard.supported) {
        console.log('Sorry, copy to clipboard is not supported');
    }
    $scope.clickCopyTest2 = function (str) {
        clipboard.copyText(str);
        alert("コピーテスト２成功");
    };
});

方法１のsupportedの値がどう影響するのか分かりませんでしたが、とりあえず動作はします。