angular指令：实现复制到剪贴板功能

最新推荐文章于 2024-01-18 11:08:43 发布

岁兆

最新推荐文章于 2024-01-18 11:08:43 发布

阅读量6.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： angular 文章标签： angular 前端指令复制功能

本文链接：https://blog.youkuaiyun.com/p493794782/article/details/72910669

angular 专栏收录该内容

6 篇文章

订阅专栏

找过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>

点击后的效果图：