找过clipboard 和 ngclipboard两个插件,建过简单的demo测试都是可以的,一旦用到项目中就各种报错,项目是angular + require搭建的,查阅了各种资料,终于找到了相对简单的指令实现方法。
var myApp = angular.module('app',[]); myApp.directive('ngCopyable', function($document) { return { restrict: 'A', scope: { copyText: '=' }, link: function(scope, element, attrs){ //点击事件 element.bind('click', function(){ //创建将被复制的内容 $document.find('body').eq(0).append('<div id="ngCopyableId">' + scope.copyText + '</div>'); var newElem = angular.element(document.getElementById('ngCopyableId'))[0]; var range = document.createRange(); range.selectNode(newElem); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); var successful = document.execCommand('copy'); //执行完毕删除 var oldElem = document.getElementById('ngCopyableId'); oldElem.parentNode.removeChild(oldElem); window.getSelection().removeAllRanges(); //提示 if (successful) { alert('已成功复制:' + scope.copyText); } else { alert('浏览器不支持复制'); } }); } }; }); <div ng-copyable copy-text="'我是被复制的'">复制</div>点击后的效果图:
