1. 程式人生 > >angular指令:實現複製到剪貼簿功能

angular指令:實現複製到剪貼簿功能

找過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>
點選後的效果圖: