前言

在其他网站上，经常会看到网址复制到剪贴板这种功能，刚好前些天公司在做分享活动时也遇到了这种需求，于是就自己做了一个基于clipboard.js的AngularJS的指令。

关于clipboard的解决方案

目前比较常用的有两种解决方案，一种是使用ZeroClipboard.js实现，另一种则是使用clipboard.js实现。
clipboard.js最大的优点就是

A modern approach to copy text to clipboard.No Flash. No frameworks. Just 3kb gzipped

clipboard.js浏览器支持如下，仅支持IE9+：
text
更多详情的信息可前往clipboard.js官网（https://clipboardjs.com/）。
所以如果想要支持低版本的IE（IE8及以下）的话，肯定就无法使用clipboard.js，所以我们还可以选择ZeroClipboard.js。

The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.

ZeroClipboard.js是基于Flash实现复制内容到剪贴板，最大的优点就是支持较低版本的浏览器，包括低版本的IE。
但这同时也是它最大的弊端，如果用户的浏览器没有装Flash，那么它就只能歇菜了。

更多关于ZeroClipboard的信息可前往官网（http://zeroclipboard.org/）

如何使用基于clipboard.js实现的AngularJS指令

既然采用了AngularJS，那就已经勇敢得抛弃了老掉牙的IE8了。所以我自然就选择了clipboard.js来实现。

安装

npm install angular-clipboard-directive -S

在页面中引入clipboard.js和angular-clipboard.js。

加载依赖

将angular-clipboard添加到你的应用的依赖中

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

使用方法

1
2
3
4
5
6
<!-- Target -->
    <textarea id="bar" ng-model='text'></textarea>
    <!-- Trigger -->
    <button class="btn"  clip-action="copy" clip-model="text" clip-alert='true' clip-success-text="地址已经复制到剪贴板!" clipboard>
        复制到剪贴板
    </button>

其中button按钮拥有4个属性分别为：

  • clip-action：设置行为，默认是copy，还可以设置为cut；
  • clip-model：需要复制的model，这里的model要等于前面的ng-model='text';
  • clip-alert：是否需要弹出框提醒，true是弹出框提醒，false则不弹出；
  • clip-success-text：弹出框提醒文字。

到这里就可以愉快地使用复制到剪贴板的功能了。
最后来看下非常简单的源代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
angular.module('angular-clipboard', [])
.directive('clipboard', [function(){
    return{
        restrict: 'A',
        scope: {
            action: '@clipAction',
            text: '=clipModel',
            clipAlert: '@clipAlert',    //if alert the tip after clip success
            successText: '@clipSuccessText'    //the alert text
        },
        link: function(scope, ele, attr){
            angular.element(ele).attr('data.clipboard-action', scope.action);    //set action: copy or cut. default: copy
            angular.element(ele).attr("data-clipboard-text",scope.text);    //set text that you want to copy
            scope.$watch('text', function(){
                angular.element(ele).attr("data-clipboard-text",scope.text);
            })
            var clipboard = new Clipboard('.'+attr.class);
            //after clip success
            clipboard.on('success', function(e) {
                if(scope.clipAlert =='true'){
                    alert(scope.successText);
                }
                e.clearSelection();
                //clipboard.destroy();    //destory
            });
            //when error occured
            clipboard.on('error', function(e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });
        }
    }
}])

附上 GitHub 项目地址